Most Liked Content

A quick note to let people know I am working on modifying Mike Jolly's Pagelines woocommerce plugin to work with woocommerce 2.0. It will be available on the store as a free plugin. Right now it is being tested and bugs worked out. Will let you know when it hits the store.

Every single day people ask us how to speed up their sites. So here are the most common reasons why a site can be slow and some solutions.

 

Shared Hosting

 

Shared hosting speeds depend on many factors.

 

• How many other people are you sharing with?
  Often this is the main contributing factor and using the this tool you can instantly see how many other sites are competing for the resources.
   
• Networked files systems.
  Often shared hosts will use networked filesystems to get more and more customers onto their overloaded servers.
  This is great unless you have many small files to load ( think file based object/db cache ) and the webserver has to fetch every single one
  over the network!
   
• Poorly configured.
  Sometimes hosts disable a lot of core PHP functionality to make it more secure.
  SuHosin if not configured properly can cause problems.
   

One of the worse things for slowing down the web server is the amount of HTTP requests on a page. Back in the old days it would be one html file and a few images, so maybe 5 requests per page. Things have changed dramatically now! Ive tested some sites reported slow on this forum and seen well over 100 HTTP requests on one page alone! Imagine there are 1000 other sites on that server all with 100 requests per page! Now do you see why shared hosting is kinda slow sometimes?

​So there are a couple of ways to squeeze some more speed out of that 2 bit outfit you are paying next to nothing a month for.

 

1. Caching.
   Im going to stick my neck out here and recommend wp-super-cache. Its been around for ages and just works!
   It will store your pages/posts etc as static files and serve them via .htaccess so PHP is not even loaded.
   Also has built in support for CDN Pull Zone.
    
2. CDN.
   A Content Distribution Network offloads all your small files ( css/js/images ) to many other servers around the world and they are served
   by the closest server to the end user thats viewing your page, this speeds up your page response time by a huge amount!
   ​Remember all those HTTP requests  I mentioned just now?
   There are a few CDN plugins about none of which I have the time to test so I wrote one myself, its attached to this post. I adds a menu to
   the PageLines admin area with a text area to add your pullzone.
   If you need a cheap CDN package I recommend MaxCDN. 
    

Resources mentioned in this post.

 

WordPress Super Cache

 

Reverse IP lookup tool

 

MaxCDN

 

 pagelines-cdn.zip   4.09K   22 downloads

Hi,

 

I was having the same problem on a site I am coverting to Pagelines from another theme.  Again, everything was working till I updated to Woocommerce 2.0.  After playing around with the code it appears that there is a clear on .hentry that breaks the layout.

 

I fixed it with the following code

 
#page {
	.products .hentry {
		clear: none;
	}
}

 

I hope that helps so you can upgrade to Woocommerce 2.0

I’m posting this how-to here in case anyone needs it since I think it’s pretty handy.

 

In case you have ever wondered how to add a category description to each of your category pages, here is how you do it! Yay. OK, here's what you need to do (I broke it up into chunks - you just follow the steps from start to finish).

 

PART 1: First you need to install/activate a section and a plugin

1. *If you already have the ContentBox section installed and activated you can skip this step*
To install ContentBox, go to PageLines > Store > Sections > Get New Sections > Top Free then click the "Install" button and then activate it. It won't show up in Drag & Drop if it's not activated!

 

2. Now go to Plugins > Add New and search "Shortcode Exec PHP" and click the "Install Now" link then once it installs activate it by clicking "Activate Plugin". Now you're done installing your stuff!

 

PART 2: Adding the ContentBox to the right place and adding your category description

 

3. Go to PageLines > Drag & Drop and select "Page Templates" OR "Content Area" (depends on which one you want) under "Select Template Area" and "Category" under "For Which Type of Page"

 

4. Drag the ContentBox section from the Available/Disabled Sections area on the right to the top of the Active Sections area on the left (you must arrange ContentBox at the top so that it displays at the top of the page). Now your category description has a home!

 

5. Now go to Post > Categories and mouseover whichever category you want to add a description to and click the "Edit" link.

 

6. Once you've done that, type it in the Description box directly below the "Parent" dropdown menu option and save it by clicking the "Update" button at the bottom. Alright! Your category description is all set! (If you have more categories to add descriptions to, just repeat this step)

 

PART 3: Now it's time to convert the PHP tag WordPress provides for adding category descriptions to templates to a shortcode that can be added to ContentBox!

 

7. Go to Tools > Shortcode Exec PHP on the left side of your Dashboard and scroll down. You're going to see an empty box that looks like this:

 

8. In the field at the top, type in categ_des (short for "category description" so you know that's what the shortcode is going to be for) and then add the following code to the box EXACTLY as it is (don't add spaces or any extra code). It'll occupy just one line in that box (please see the Attached Thumbnail at the bottom of this post to see what the box should look like).

 

9. Now click on the "Save" button below the box and now you've got your shortcode! The shortcode is as shown at the top of the box with the brackets added on each side: [categ_des]

 

PART 4: Adding the shortcode to ContentBox and finishing it off!

 

10. Now go to PageLines > Page Options > Category Page and select ContentBox (note: if this section is showing up as inactive, please go to PageLines > Store > Sections > Your Added Sections and click the Activate button to activate it!).

 

11. In the Content Box Content area, add your shortcode [categ_des] so that it looks like this:

 

Click "Save Options" and check out that spankin' new description at the top of your category page! YAY! Here's mine as an example:

Note: I didn't make any adjustments with CSS which accounts for the spacing weirdness, but you can easily take care of any appearance issues using Custom CSS.

 

You're done! Time to celebrate with a few party kittens:

 

UPDATE: I've been developing a site over the past two days with WooCommerce plugin integration by Ellen, and I have to say that I really appreciate it!

Works great, and no bugs to speak of yet.  More options are always better, but for a free plugin, Ellen really out did it!  

Hi,

I'm working on the new docs and thought I would share a sneak peak with you. Please ignore any spelling mistakes etc.., as these pages have yet to be proof read.

bit.ly/Qu31qX
bit.ly/UiVB7a

Welcome to the PageLines.com support forums. In order to expedite community response to your posts, please keep the following in mind when posting:

• Search. Answers to many questions can be found in previous forum postings or in the Resource Center. Use the search bar at the top right of the screen to search the entire community (members and forums), or search only forums postings by using the advanced search capability.

• Choose informative thread titles. When starting a new thread, choose a title that captures the essence of your question. Try to avoid posting the entire problem in the title. That only makes it more difficult to help you.

• Provide details. Aim to provide enough information so that follow-up or clarification questions aren't necessary. Include details about the request you are sending and the response you are receiving. Posting the actual request and error response is always helpful. A link to your site is extremely helpful in expediting our response.

• Use the appropriate channel. For technical questions that require you to submit sensitive information, please send an e-mail or private message to the moderator by request. Normally, they only request this if it's necessary to access your site's dashboard. If you have a business / licensing question about Pagelines' offerings or billing, please e-mail us at hello@pagelines.com. Please seek Pagelines support via these channels over using private messages.

• Post code between [ code] and [ /code] tags. This will help make posts involving code more readable. ( not remember to remove the extra space in the tag ).

• A Happy Community. While this is a fully moderated forum, we try to make this a happy place and a community. If you feel you have a great answer for someone's topic, feel free to post your reply. We ask however, that if you have a similar problem you open a new topic. Not all similar problems have the same cause, so it's in your best interests to start a new topic and obtain direct support.

• Resolved Topics. While it's possible to post on an already resolved topic, generally, our team is focused on new and open topics, rather than those marked resolved. Likely, you will not get a response.

• Have Fun. Technical support issues can be extremely frustrating and angering. Our team endeavors to help as quick and as efficiently as possible. Sit back, take a deep breath, have a cold beverage and post your topic. We find that humor and good will help resolve problems much better than anger or frustration.

Enjoy your experience in PageLines' new Resource Center and don't forget... keep smiling!

It's also worth mentioning that you can customize core sections like the branding section (if that's what you're using in the header) by copying the specific section's folder from the Pagelines sections folder into your child theme's "sections" folder (just create one if there isn't a folder there yet).  From there you are free to customize the section however you'd like without being at risk of losing your customizations next time the framework is updated.  Kind of like child themes for sections.  If you decide to go this route, I would recommed you disable the core's version of the section from under Pagelines > Store > Sections > Core Framework to prevent any possible conficts.

Depending on where you need to add the extra link, a hook may be a much quicker and easier solution, but I just thought I'd mention another way

This forum is really good and very helpful.
I have just started using wordpress and then I came upon Pagelines.
Made my life easy and helped me learn the intricacies of wordpress.

Though I do not have a hard core programming background, in a short while I was able to learn a lot.
I am a newbie and rely a lot on plugins and custom code developed by gurus like you guys.

Thank you for your support and actively helping us.

Hope I will soon be able to append my website name ( built on pagelines ) in my signature.

Hi there!

A lot of us have been posting here for quite some time, and already do know each other (perhaps sometimes a little more than we'd like to ), but there are a lot of new faces lately and let's not have anyone feel left out!  I'll start, since I'm still a newbie - according to Rob!

My name is Henry, and I've been playing with WordPress for.. wow, since high school?  That's nearly 7 years!  I haven't done much on the development side of it, but I love the community - attending WordCamps & Meetups all over.  

When I'm not being a PressHead and working at PageLines, I enjoy traveling to new places, finding obscure art galleries, antique and local fashion trend shopping, listening to music (Currently Passion Pit) and pretending my boston terrier Napoleon is an actual child - yes, I'm one of those.

Napoleon & Hometown:


Your turn! (Don't be shy!)

Aslo want to thank uTestimonials for a great support yesterday.

Great job Pagelines team.

Hi everybody … justed wanted to share some Custom CSS to integrate the beautiful »Latest Blog Entries« Section from Enrique Chávez into iBlogPro5 design.

 

http://www.screencast.com/t/ZkrvuSfm

 

And her are my modifications:

 
/* LATEST BLOG ENTRIES (adjustments) */

.slides {
    text-align: center !important;
}

.caroufredsel_wrapper ul {
    margin-left: 12px;
    margin-right: 30px;
}

.caroufredsel_wrapper {

    width: 1069px !important;
}

.latest-slider ul.slides li {
    width: 200px;
}

.latest-slider .blog-thumb img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    margin: 1px 0px 12px 1px; 
    padding: 3px;
    width: 92%;
}

.latest1 ul.slides li {
    background-color: #FAFAFA;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #F2F2F2);
    background-repeat: repeat-x;
    border: 1px solid #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    padding: 20px 20px 5px;
    text-shadow: 0 1px 0 #FFFFFF;
    border-color: #E4E4E4 #CCCCCC #BBBBBB;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #CCCCCC;
}

.latest-slider .latest_pagination {	
	margin: 5px 48.6%;
}

/* LATEST SLIDER (Arrow to Dots Modification) */

.latest-slider .nav {
-moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #E7E9EC;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.4);
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    margin: 0 8px 4px 0;
    padding: 1px 10px 0;
    text-align: center;
    height: 10px;
    padding: 0;
    text-indent: -1000em;
    width: 10px;
}

.latest-slider #prev_pag:hover {
	background: none repeat scroll 0 0 #D3D7DC;
    color: rgba(0, 0, 0, 0.7);
}

.latest-slider #next_pag:hover {
	background: none repeat scroll 0 0 #D3D7DC;
    color: rgba(0, 0, 0, 0.7);
}

Put into Custom CSS-Plugin and Enjoy 

Aloha - Tang

 

 

Hi,

 

All sections in PageLines Framework have a similar HTML/CSS structure to position the sections content, this structure looks like this:

 

<section ID="SectionName" class="section-sectionname fix"> <== There may be more classes but this is just for example purposes.

<div class="texture">

<div class="content">

<div class="content-pad">

 

Now as you can see above, each section has a div with a class called content-pad, this container controls the padding for that section. So in order to reduce this sections padding, we will need to use the sections class, which you can see in the <section> above and then add the content-pad class after it in our code, this will target that sections content-pad and no others.

This means you can reduce the padding for that section and that section alone. The code you have above, will do it globally across your site.

 

So here is an example which will assist you.

 

.section-sectionname .content-pad { padding:0px; }

 

The code above will give our example section zero padding and therefore reduce the space (gap) from top, right, bottom and left.

 

As for your Download button, you have added the HTML for your button in the ContentBox section. So I recommend using Firebug or your browsers built-in web dev tools and inspect the ContentBox sections content-pad element to find the correct code.

 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/

Hi Willem,

 

The numbers for each accordion must keep increasing when they are on the same page, even though they are in separate accordion sets, so you shouldn't use number="1" again but continue to number up from 11 (the last number in your first set) to number="12".

 

Hope that works.

 

Ellen

Hi Stefano :-) 

 

Yes that could be possible with css, if you're looking for someone to provide the direct css code for the site we'd have to advise you contact the pro's at hello@pagelines.com, but we'll leave this post open in case another user can provide this for you.

 

Our official response will have to be that we advise you use firebug to locate the various ID/classes to affect the css (www.getfirebug.com). If you're looking to make the color backgrounds span the entire page make sure you've set 'full width sections' in the template layout.

 

An example of the above to set the color will be

 

 
#footer {background:#dddddd;}

Hey Steve,

No problem, the shortcodes aren't locked to a few types of buttons.  They just generate some link markup.  No need to override existing button types.

The only thing you need to do is define the css class to style your extra buttons.  You'll want to use LESS to create the styling as that is how the existing buttons are styled, and it's really quite easy to make your own. The majority of the styling is already handled by the button shortcode, you just need to handle the extra colors.

For example, if you wanted to create a button type "awesome", you would need to style that with the .btn-awesome css class.

Jumping into some quick LESS:

 .btn-awesome {
  color: @white;  
  .buttonBackground(@startColor, @endColor);

  &:hover {
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    color: @white;
  }
  &:active {
    color: rgba(255,255,255,.75);
  }
}

What we just did is created a style for our awesome button that you would call with the pl_button shortcode with a type="awesome".  We defined the button type's background color gradient (as well as the hover & active background colors and border color - dynamically), and set our hover & active states for the button text (based on the existing types).  The .buttonBackground() mixin does a lot. Cool stuff.

The @startColor and @endColor should be replaced with any less variable or valid css color value (hex, rgb, rgba ..).  The gradient goes top-down, so the start color is the top and the end is at the bottom.

To use this button, you would use it the same way you would use the others:

Via shortcode: [pl_button type="awesome" link="some url"]click here[/pl_button]
OR
Old fashioned way:

 <a href="some url" class="btn btn-awesome">click here</a>

Hope that helps, good luck!

Hi Max,

What you could do is use a CSS pseudo element, below is an example that will add an image over your Feature slider images. You will need to add your Feature Sliders area width and height and add your watermark image, but the code certainly works.

 
.fset_height::after {
content: "";
position: absolute;
background: transparent url( Add image path here ) repeat 0 0;
left: 0;
top: 0px;
display: block;
width: Add your Feature Slider width here;
height: Add your Feature Slider height here;
}

Also, depending on your image transparency, you may need to use the opacity property.

sure

 
blockquote {
background: url(add image url here);
background-repeat: no-repeat;
border: 1px dotted #E3E3E3;
clear: both;
margin: 10px 0 10px 10px;
padding: 8px 18px 5px 10px;
}

Great work on the new forum!

Yes, it is possible to change the style of a content area on a specific page. The same goes for a specific widget in a sidebar. For example, if you want to change the content area (the main content column on the left side of the page) on specifically the homepage, you'd use this CSS:

 body.home div.mcolumn-pad {background-color: #yourcolor;}

For the blog page, this code:

 body.blog div.mcolumn-pad {background-color: #yourcolor;}

For a regular page (like About Us), this code:

 body.page-id-874 {background-color: #yourcolor;}

...and so on.

For the regular pages, you need to use that specific page's page ID for the body tag selector (as shown above in the About Us example - since the ID for that page is 874). To find it, you can view your source and look at the class tag at the top of the page.