Jump to content

Archived

This topic is now archived and is closed to further replies.

julius

CSS styling iBox

Recommended Posts

julius

Hi,

 

I am trying to change the color of the icon in the iBox section.

(FYI: I am not so good with CSS, just experimenting)

 

When I enter a custom color I change the whole i Box color (also the iBox title and iBox text color).

 

What must I type to change ONLY the icon color

(for example like in the iBox on pagelines.com)

 

Would be great if someone can help

:-)

Share this post


Link to post
Share on other sites
Rob

If you inspect our homepage www.pagelines.com in Firebug for Firefox, you'll select the icon and you'll find this CSS

#page .edge-boxes .pl-contrast {
    background: none repeat scroll 0 0 #F04831;
    color: #FFFFFF;
}

You see #F04831;

 

That's the color of the icon. Adjust accordingly.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
loiborg

If you inspect our homepage www.pagelines.com in Firebug for Firefox, you'll select the icon and you'll find this CSS

#page .edge-boxes .pl-contrast {
    background: none repeat scroll 0 0 #F04831;
    color: #FFFFFF;
}

You see #F04831;

 

That's the color of the icon. Adjust accordingly.

I have the same issue. I've tried adding the CSS in the 'Custom LESS/CSS' field. I've then saved and refreshed, but nothing happened. I've also tried adding '.edge-boxes .pl-contrast' to the styling of the iBoxes with no result as well. Am I doing something wrong?

Share this post


Link to post
Share on other sites
julius

I tried the custom CSS line above, but nothing happened. If anyone can share some CSS-details on how to change the iBox icon-color and icon-shape would be great!

Share this post


Link to post
Share on other sites
Rob

Have either of you inspected it with Firebug or Chrome to see if you can find the proper CSS?  Did you change the color #F04831 to something else?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
NearlyJen

Hi Rob, 

 

I have a slightly different question along these lines. The Boxes in Framework had individual id numbers, so it was easy to style each box individually (for a page of multicolored boxes, for example). The new iBoxes in DMS do not have a unique class for each box that I make, so I can't figure out how to make three boxes on one page three different colors. Can you help?

 

Jennifer


Lapsed vagabond and reformed ne'er-do-well.

Nice to meet you. 

Share this post


Link to post
Share on other sites
Danny

To change the background color of the iBox circular shape, use the following code:

.ibox-icon-border {
background: #F00;
}

To change the color of the iBox icon, use the following code:

.ibox [class^="icon-"], .ibox [class*=" icon-"] {
color: #00F;
}

Jennifer, this has already been reported as it is currently not possible, without the use of the a pseudo class, see here - http://css-tricks.com/how-nth-child-works/

 

and here - http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
julius

That worked! Thx

Share this post


Link to post
Share on other sites
Danny

No problem! ;)


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
loiborg

To change the background color of the iBox circular shape, use the following code:

.ibox-icon-border {
background: #F00;
}

To change the color of the iBox icon, use the following code:

.ibox [class^="icon-"], .ibox [class*=" icon-"] {
color: #00F;
}

Jennifer, this has already been reported as it is currently not possible, without the use of the a pseudo class, see here - http://css-tricks.com/how-nth-child-works/

 

and here - http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

Awesome, Danny! Is there also a way to change the circle to a rounded box like the Font Awesome icon-sign-blank http://fortawesome.github.io/Font-Awesome/icon/sign-blank/

Share this post


Link to post
Share on other sites
loiborg

- and how do I change the hover color?

Share this post


Link to post
Share on other sites
Danny

You can add the following CSS to change the shape from circular to squared with round corners, change the value to suit your needs.
 

#site .ibox .media-type-icon {
.border-radius(8px); /* change to whatever value you like */
}
 
As for hover:
 
#site .ibox .ibox-icon-border:hover {
background-color: #F00;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
loiborg

Just awesome, Danny. Thanks a bunch! This would be good to have in the documentation - maybe the sections in the tutorials for using sections could be nested, and this could be added to the iBox-section with a title like 'customizing iBoxes'. But perhaps even better if changing the colours and shapes were a part of an update. With global settings for the default layout and local for special content.

Share this post


Link to post
Share on other sites
Danny

loiborg

 

I hear you, I am currently writing up a docs page called Cheatsheet which will be added when complete, to the Customize section. This page will contain snippets of code to change specific things such as, changing the Color of headers, text in sections from Hero, Masthead to iBoxes and so forth.

 

Once I have a half decent draft, I push it to GitHub and then continue to work on it.

If you have any suggestions, write them here or add an issue on GitHub and I can try to work them in. However, as you can imagine, this doc will take sometime due to the amount of work needed. But the iBoxes CSS in this topic, will be added to the doc.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
flourishdesignstudio

It seems like you have to undo a lot of styling to be able to make a design work. Wish this was not so complex! I need to make the image area transparent so that I can add a transparent png that shows through to the background. Can someone help me strip out the code so that it's just a plain box that I can add an image to, like the old boxes? Thanks in advance!

Share this post


Link to post
Share on other sites
atcdomainsolutions

loiborg
 
I hear you, I am currently writing up a docs page called Cheatsheet which will be added when complete, to the Customize section. This page will contain snippets of code to change specific things such as, changing the Color of headers, text in sections from Hero, Masthead to iBoxes and so forth.
 
Once I have a half decent draft, I push it to GitHub and then continue to work on it.
If you have any suggestions, write them here or add an issue on GitHub and I can try to work them in. However, as you can imagine, this doc will take sometime due to the amount of work needed. But the iBoxes CSS in this topic, will be added to the doc.

Danny, you mentioned you had/have a draft of the cheatsheet and you then push to Github? Is it there now or do you plan to put there soon?

Share this post


Link to post
Share on other sites
Danny

atcdomainsolutions

 

No, because these are super quick drafts its in a private repo. Once I have checked the code to what I have added so far, I will add the draft the Docs Git repo. It should there sometime next week.

 

flourishdesignstudio

Not sure what you're trying to do. If you want the old boxes, use the legacy plugin - https://www.dropbox.com/s/td816ccbrbg0xjk/pagelines-legacy-sections.zip


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
micstepl

atcdomainsolutions
 
No, because these are super quick drafts its in a private repo. Once I have checked the code to what I have added so far, I will add the draft the Docs Git repo. It should there sometime next week.
 
flourishdesignstudio
Not sure what you're trying to do. If you want the old boxes, use the legacy plugin - https://www.dropbox.com/s/td816ccbrbg0xjk/pagelines-legacy-sections.zip




is there a Chance that you simply (quick!!!) post the pseudo class code to change a) the background of one actual section and b) hover. Just to get the idea.
thx
,Michael

Share this post


Link to post
Share on other sites
Danny

Not sure what you mean ?

 

If you're referring to having individual styling for a specific box, you can do this by using the style classes field option for that specific box, giving it a unique class.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
start2market

I have tried applying a specific class to one individual ibox but it doesnt seem to apply it. If I apply a class to the Ibox section then it works. But individual ibox classes dont.

 

Any problems to report with this?

 

Also why does better iboxes remove this individual ibox styling feature? (I will ask the author)

Share this post


Link to post
Share on other sites
Danny

Reported the issue with the individual styling classes not being applied.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
karenb

Not sure what you mean ?

 

If you're referring to having individual styling for a specific box, you can do this by using the style classes field option for that specific box, giving it a unique class.

 

Hi Danny

I want to do just this, apply a different background color to a specific box based upon the page-id. 

 

When I apply a unique styling class to the ibox-class section of an individual box, that class is not visible on inspection. ie the class text is accepted by the form that edits iboxs but does not transfer to the code. ie the function doesn't work. As you said to Jennifer on 15/8.

 

I don't understand pseudo-class, nor how I could apply them if I can't get a class to stick to a box.

 

What can I do?

 

Karen

 

PS:  Didn't turn the page, so didn't see your post of 6/9.

        Please keep the thread updated, I need this function urgently.  Ta

Share this post


Link to post
Share on other sites
Danny

karenb, the issue of the individual styling class not be applied has already been reported.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Adrianna Lima

Hi,

 

   How do i change the color of icon when hover then?

 

.ibox [class^="icon-"], .ibox [class*=" icon-"]:hover {
color: #000;
}

 

doesnt seems to work

Share this post


Link to post
Share on other sites
greenfly

Hi Adrianna 

 

Please can you start your own topic with a link to your site and we can help 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • Audun MB
      By Audun MB+
      I've added a number option (ie the first box has a 1 next to or above, second box has 2, etc) to iBoxes in DMS (as a custom section), and I'd like that for PL5 Boxes as well. Adding it for iBox was quite easy:
      First this: 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pagelines' ) ), 'count' => array( 'name' => __( 'Counter', 'pagelines' ) ), 'image' => array( 'name' => __( 'Images', 'pagelines' ) ), 'numb' => array( 'name' => __( 'Number', 'pagelines' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pagelines' ) ) And then this } elseif( $media_type == 'numb' ){ $background = ($color) ? sprintf('<span class="invert-icon" style="background-color: %s;"></span>', $color) : ''; $media_html = sprintf( '<i class="iii icon iboks-number" style="%s">%s</i>%s', $text_color, $count, $background ); } And some CSS (though I used the style for icon mostly). iBox already did know which number the box had in the sequence, so adding the number was quite simple. 
      The Boxes code, and PL5 code in general, is a bit mor complex with javascript (with Knockout) and php, and some CSS cheats. It took me a while to figure out how it works, and I'm not sure I quite grasp it yet.
      Adding a number option to the media array is the same as iBox:
      array( 'key' => 'ibox_media', 'type' => 'select', 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pl-section-boxes' ) ), 'count' => array( 'name' => __( 'Counter', 'pl-section-boxes' ) ), 'boxnumb' => array( 'name' => __( 'Numbering', 'pl-section-boxes' ) ), 'image' => array( 'name' => __( 'Images / SVG', 'pl-section-boxes' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pl-section-boxes' ) ) ), 'default' => 'icon', 'label' => __( 'Select iBox Media Type', 'pl-section-boxes' ), ), In the section template I'll add a line for the boxnumber. In addition I have to add variuous boxnumb classes in the build.less file to make it hidden by default and style it.
      function section_template(){ ?> <script type="text/html" id="boxes-template"> <a class="boxes" data-bind="class: boxclass() + ' pl-col-sm-' + $root.ibox_cols(), plhref: link" > <div class="boxes-pad" data-bind="class: 'pl-control-'+ $root.ibox_format()"> <div class="boxes-media media-left"> <span class="the-boxes-media pl-animation pl-appear" data-bind="class: 'media-'+$root.ibox_media(), style: { color: color, width: $root.image_width() + 'px', opacity: $root.image_opacity}"> <div class="pl-image" data-bind="plbg: image, class: $root.image_format"></div> <span class="pl-counter" data-bind="pltext: count"></span> <span class="pl-boxnumb" data-bind="pltext: ?numbervalue?"></span> <i class="boxes-icon pl-icon" data-bind="class: 'pl-icon-'+icon()"></i> </span> </div> <div class="boxes-text media-right"> <h3 class="boxes-title" data-bind="pltext: title"></h3> <div class="boxes-desc" data-bind="pltext: text"></div> </div> </div> </a> </script> Where I'm stuck is how to get the number to supply to pltext. Since the boxes are numbered in the configuration panel (showing as Item 1, Item 2, ...) I guess there is something in the code that could give me the box number, but what would that be? Finding it in the pure php code of iBox was quite easy, but the Javascript-Knockout.js-PHP code in PL5 isn't that easy to read. 
      I realise that I'm developer terrority now, but I'd appreciate any help. I guess this could be useful for more people if get it to work. Maybe it should be added as a standard option? "X things you need to know" or similar is staple website content and the Boxes section is ideal for that with numbers. On our website the "X things you need to know"-pages is half our traffic. 
    • laka74
      By laka74+
      Dear support,
      I'm having problems using the iBox - can't change anything or delete it ?!
      http://seriousplay.training/
      Best
      regards
      Lasse Kramer
    • Audun MB
      By Audun MB+
      I'd like to have the images in iBox to look different with the following CSS. This works when manipulating the CSS with Inspect element in Chrome, but I can't get it to work as a class. Here's the class:
      .imagecontain {     border-radius: 1px;     background-size: contain;     background-repeat: no-repeat;       } This is from my style.less in the child theme. I applied the class to the iBox with custom class option, though nothing happens. How to fix that? How do I target only the div with the image in with CSS?
    • dchetson
      By dchetson+
      I am trying to edit the text in an iBox but every time I attempt to make the change, it doesn't take. Website is www.chetson.com.
      Thanks!
×