Jump to content
Sign in to follow this  

Horizontal Line Tag

Recommended Posts


My site's currently on "away" mode as I'm updating it.


I wish to use custom lines underneath blog posts and even headers and footers as well.  Can this be done?



Here's the URL to the line I wish to replace the straight line I have now.




Thanks for your help already.



Share this post

Link to post
Share on other sites



All you will need to do is inspect the different areas you wish to add this line image and using Firebug or your browsers built-in web dev tools, then use the background-image property and add the custom code to custom CSS.


For example, using the following code will add the image below each of your blog posts on the blog page.


#site .hentry .hentry-pad {
background-image: url(
background-repeat: no-repeat;
background-position: center bottom;
padding: 0 0 40px;


Please search our forums, before posting!

Share this post

Link to post
Share on other sites

I wish to have the line image show up whenever I think <hr> command would usually put a regular line.  I'm having trouble with the directions you gave...  Sorry, I'm not the best web-dev, just a photographer trying to do my best.  Is this something I could pay you/someone for?

Share this post

Link to post
Share on other sites
James B

Hi thereason


We do have a group of Pagelines Pro's who could assist you www.pagelines.com/pros/


However using the code Danny's provided you could tweak the code to suit what you want to include. For example if you wanted to add a simple line you could use the below code in place of the image.



{border-bottom:1 px solid black;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Hannie
      By Hannie
      On my testpage http://shop.mommersontwerp.nl I have a really strange thing happening. There is a borderline right below the header in Firefox. It's not supposed to be there.
      When I enlarge the view it's gone. When decreasing the view it takes 2 steps and then it's gone again.
      It's not visible in Chrome or in Safari, so the logical conclusion is, that it's a Firefox-thing and not a Pagelines-thing. I just have no idea how to fix this. Anybody familiar with this problem?
      Computer: Apple
      Theme: iBlogPro6
    • daragh
      By daragh
      I've added two sidebars [Homepage Left SB and Homepage Right SB] using the following code (just showing the code for the left one...):
      <?php /* Section: Homepage Left SB Author: PageLines Author URI: http://www.pagelines.com Description: Shows full width widgetized sidebar. Class Name: HomepageLeftSB Edition: pro Workswith: templates, footer, morefoot Persistant: true */ /** * Homepage Left SB * * @package PageLines Framework * @author PageLines */ class HomepageLeftSB extends PageLinesSection { /** * Section template. */ function section_persistent() { $setup = pagelines_standard_sidebar($this->name, $this->settings['description']); register_sidebar($setup); } function section_template() { pagelines_draw_sidebar($this->id, $this->name); } Happily, both work perfectly.
      My issue is this: I cannot get them to line up side by side - the second one seems to insist on appearing UNDER the first one.
      I've tried some CSS with limited success as follows:
      #homepage-left-sb .widget-pad{ float:left; background-color:#99FFFF; width:30% } #homepage-right-sb .widget-pad{ float:right; background-color:#FFFF99; width:30%; } #homepage-left-sb .fix:before , #homepage-left-sb .fix:after { content:none !important; clear:none !important; } #homepage-right-sb .fix:before , #homepage-right-sb .fix:after { content:none !important; clear:none !important; } It does put the right one to the right of the screen, but again, it's to the right AND UNDER the first one. What I want is them to appear side by side, one on the left, one on the right at the same vertical starting point.
      I did post this in the iBlogPro form but feel it's not necessarily an iBlogPro issue, more of a Pagelines issue and I'll mark that one as closed / resolved just to avoid duplication. Also I felt that this is more likely to be seen more quickly here. Apologies if this causes any issue - I'm under pressure here.
      Very much hoping that there's some simple CSS I've just not spotted.
      Any help very much appreciated.
    • daragh
      By daragh
      I've successfully setup up two new sidebars as shown on the above page. I'm trying to get them to line up beside each other horizontally but the second one seems to always start (vertically) after the end of the first one.
      Pulling my hair out here...
      Here's the CSS I've added:
      /* main CSS moved to child theme - don't panic :-) */ #homepage-left-sb .widget-pad{ float:left; background-color:#99FFFF; width:30% } #homepage-right-sb .widget-pad{ float:right; background-color:#FFFF99; width:30%; } #homepage-left-sb .fix:before , #homepage-left-sb .fix:after { content:none !important; clear:none !important; } #homepage-right-sb .fix:before , #homepage-right-sb .fix:after { content:none !important; clear:none !important; }
    • caspersjan
      By caspersjan
      Hello, I am trying to implement a BrandNav menu. The menu items appear vertically and somewhat lower on the right edge. In all docs and forum post samples, they are horizontal, to the right of the logo
      (e.g. here: http://support.pagelines.me/docs/sections/brandnav/).
      I cannot figure out where my settings can be different. Is there an easy solution to this?
      Here is the URL: http://www.animatinggaza.com/wordpress/
      Thank you for your help! Yours faithfully, Jan.
    • tristanrodgers
      By tristanrodgers
      hey guys!
      i have a problem with my header:
      my customize settings are this right now:
      .navbar.pl-color-grey { position: fixed; width: 100%; border-width: 0; box shadow: 0px; background-color: transparent; background-image: url(http://bierundich.de/back.png); margin-top: 0px; }   the problem is, at the bottom of the header, there is a line and i can't find the right code to get that invisible or out of css!   please help!   tristan