HR Flag

11 posts from 5 voices

• Started 1 year ago by SBPDrew
• Latest reply from Dude
• This topic is closed
• This topic is not resolved

Tags:

No tags yet.

1. 

   SBPDrew
   Member

   How can i create my own hr flag and insert it with wherever and with whatever text?

   Posted 1 year ago #
2. 

   Chris Beard
   

   Hey!

   I think my last post here can help you out. The code provided there will add an HR with a flag.

   If you'd like to create an additional flag style you'd have to add all the used classes in your custom.css or Quick CSS and modify each to get your own styling. Let us know if you need help with that.

   Best regards,
   Chris

   Posted 1 year ago #
3. 

   SBPDrew
   Member

   Thank you that works well. My only other question is how can i easily reduce the padding above & below the flag.

   Here is the page I am working on: http://www.simplybrilliantpress.net/sbpv1/
   I want the icon boxes to be closer to the HR flag.

   Not sure if this will help much but here is the code from the page:

   
<div class="hr hr_flag dynamic_el_4">
<div class="primary-background flag">
<span class="flag-text on-primary-color">Locations</span>
<span class="flag-diamond site-background"></span>
<span class="mini-seperator extralight-border"></span>
</div>
<span class="hr-seperator extralight-border"></span>
<span class="primary-background seperator-addon"></span>
</div>
<div>
[one_fourth first]

   
   [iconbox title="Castro" icon="sbp-location-pin.png"]

   2336 Market St.
   San Francisco, CA 94114
   Phone: 415-431-6725
   Fax: 415-431-1456
   castro@simplybrilliantpress.com

   [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="info" border="#000000" text="dark"]Get Quote   [/button]
   [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="download" border="#000000" text="dark"]Upload Files[/button]
   [/iconbox]
   [/one_fourth]

   [one_fourth]

   [iconbox title="Sutter" icon="sbp-location-pin.png"]

   110 Sutter St.
   San Francisco, CA 94104
   Phone: 415-392-6470
   Fax: 415-392-6474
   sutter@simplybrilliantpress.com

   [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="info" border="#000000" text="dark"]Get Quote   [/button]
   [button link="#" style="download" border="#000000" text="dark"]Upload Files[/button]
   [/iconbox]
   [/one_fourth]

   [one_fourth]
   [iconbox title="Sacramento" icon="sbp-location-pin.png"]

   925 Howe Ave.
   Sacramento, CA 95825
   Phone: 916-641-5535
   Fax: 916-641-6713
   howe@simplybrilliantpress.com

   [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="info" border="#000000" text="dark"]Get Quote   [/button]
   [button link="#" style="download" border="#000000" text="dark"]Upload Files[/button]
   [/iconbox]
   [/one_fourth]

   [one_fourth]

   [iconbox title="Rancho Cordova" icon="sbp-location-pin.png"]

   11225 Trade Center Dr. #300
   Rancho Cordova, CA 95742
   Phone: 916-631-7612
   Fax: 916-631-7683
   rancho@simplybrilliantpress.com

   [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="info" border="#000000" text="dark"]Get Quote   [/button]
[button link="#" style="download" border="#000000" text="dark"]Upload Files[/button]
[/iconbox]
[/one_fourth]
</div>
<div>


   Posted 1 year ago #
4. 

   Devin
   Moderator

   Hey SBPDrew,

   Try adding the following to your custom.css or Quick CSS. It will adjust the padding on the HR for that single page using the page id.
   #top.page-id-9 .hr_flag {
   padding-top: 10px;
   padding-bottom: 10px;
   }

   Regards,

   Devin

   Posted 1 year ago #
5. 

   SBPDrew
   Member

   Awesome! Is there a tutorial somewhere on how the CSS of the theme is setup. I'd say i'm an intermediate user of CSS but i don't understand how the structure of things are setup. For example, "#top.page-id-9 .hr_flag" how are each of the elements in this broken down. How do i find the page id of specific pages, what is #top. How could I have found out on my own that is the id I needed to edit? I guess if there was a tutorial explaining how the advanced CSS elements of the theme work I might be able to make more sense of it.

   Thanks for the help!

   Posted 1 year ago #
6. 

   Devin
   Moderator

   Hi SBPDrew,

   There isn't currently but the best thing to do is use a tool like Firebug for firefox or Chromes built in Inspect Element feature to pick apart the css. The page id is in the class list for the #top div as page-id-#. Its a good simple way to target a specific page and then the class present on that page.

   Also see: http://www.kriesi.at/support/topic/fyi-firebug-tutorial-for-wordpress-users

   Regards,

   Devin

   Posted 1 year ago #
7. 

   SBPDrew
   Member

   Okay,I've been using Chromes built in inspection, i'll try Firefox and see which I like better.

   I added a few more HR flags and even with adding the following code to my custom.css at 0px. The padding is still to large above the widgets (http://www.simplybrilliantpress.net/sbpv1/) Do the widgets automatically add another paragraph or something?

   #top.page-id-9 .hr_flag {
   padding-top: 10px;
   padding-bottom: 10px;
   }

   how can i reduce the padding between the hr flags and the widgets?

   Posted 1 year ago #
8. 

   Ismael
   Moderator

   Hello,

   Try this line. :)

   .hr p {
   margin: 0px;
   }

   Regards,
   Ismael

   Posted 1 year ago #
9. 

   SBPDrew
   Member

   .hr p {
   margin: 0px;
   }

   That didn't help. Is it possible space is added for a widget title and since i'm not using a title it looks like extra space?

   Posted 1 year ago #
10. 

    SBPDrew
    Member

    Fixed it with:

    .widget.widget_text {
    padding-bottom:0px
    }

    Posted 1 year ago #
11. 

    Dude
    Dude

    Hey!

    Glad that you found a solution :)

    Best regards,
    Peter

    Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.