WordPress.org

1. asmodei
   Member
   Posted 11 months ago #

   On Anthemfighting.com I have a red horizontal bar that goes the length of the post, however, I wish to go the full width of the page including the sidebar area. You can see it here: http://anthemfighting.com/fighters/ken-copycat-dubose

2. ryanve
   Member
   Posted 11 months ago #

   Solution 1

   In the post editor switch to HTML mode and change

   <img class="alignright size-full wp-image-135" title="Border1" src="http://anthemfighting.com/wp-content/uploads/2011/05/Border1.png" alt="" width="600" height="10">

   to

   <img class="alignnone size-full wp-image-135" title="Border1" src="http://anthemfighting.com/wp-content/uploads/2011/05/Border1.png" alt="" width="930" height="10">

   and remove the other image from sidebar widget.

   Solution 2

   Create a CSS class called fullscreen and add it to images you want fullscreen.

   CSS (add the line below to the bottom of your stylesheet in Appearance » Editor)

   .fullscreen{width:930px !important;height:auto !important;float:none}

   HTML

   <img class="fullscreen alignnone size-full wp-image-135" title="Border1" src="http://anthemfighting.com/wp-content/uploads/2011/05/Border1.png" alt="" width="600" height="10">

   The !important height/width overrides the height/width set in the <img> code. The float:none overrides the floats applied from the class alignright etc. If you use always use alignnone you don't need that part.

3. asmodei
   Member
   Posted 11 months ago #

   tried both solutions and it did not change the bar on ken's page and except on the second bar. Not sure why it works on the second one and not the first. I also need the sidebar item(s) pushed down so that they are below the bars. Thanks

4. ryanve
   Member
   Posted 11 months ago #

   Both should work—I tested it using Firebug—double-check the code. As for dropping down the sidebar content use CSS margin or padding on #sidebar or on the specific widget.

5. asmodei
   Member
   Posted 11 months ago #

   I copy pasted your code and on a page without a item in the sidebar it worked great. Let me try moving the sidebar down see if it shows after that.

6. ryanve
   Member
   Posted 11 months ago #

   Nice. A third option that would be much easier to manage in the long run is to forget the image and just use this in your stylesheet:

   .page .entry-title{border-bottom:10px solid #c00; width:930px !important}
   .page #sidebar{margin-top:20px}

7. asmodei
   Member
   Posted 11 months ago #

   that would put the red bar on every page right? We only want it/them on the figher's respective pages

8. ryanve
   Member
   Posted 11 months ago #

   Yes—if you want to do just that one use:

   .page-id-38 .entry-title{border-bottom:10px solid #c00; width:930px !important}
   .page-id-38 #sidebar{margin-top:20px}

   FYI if you want to do a few of them you can group them with commas:

   .page-id-38 #sidebar,.page-id-40 #sidebar{margin-top:20px}

9. asmodei
   Member
   Posted 11 months ago #

   Ok it worked great except it put a second border1 in there that links to another fighter page and i don't see it in the code to get rid of it.

10. asmodei
    Member
    Posted 11 months ago #

    nevermind

11. asmodei
    Member
    Posted 11 months ago #

    Thank you so much. You Rocketh

12. ryanve
    Member
    Posted 11 months ago #

    Sure thing!

Reply

You must log in to post.