Jump to content

Archived

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

pehja

CSS in iBox

Recommended Posts

pehja

Trying to target the iBox and change the color. I can find it but nothing happens when applying it in custom css

 

 

.ibox .ibox-media .ibox-icon-border.media-type-icon:hover {
  1. backgroundrgb(151, 228, 170);

 


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
pehja

Got it

 

 

.ibox .ibox-media .ibox-icon-border.media-type-icon:hover {
background: rgb(122, 201, 67);
}

Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
Rob

Excellent.

 

Have you noticed the "Class" field in iBox? You can add a unique word there, and use that to craft your own CSS.

 

For example add myibox and then make CSS like .myibox {background: red;} in Custom Code.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pehja

Hm.. Not sure I follow you there, Do you mean "styling classes"

 

Ok found it. But if I want to target the icon in the ibox with those classes what do I name them ?


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
Rob

Anything unique. But it seems you've solved this Peter. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
pehja

Hi Rob!

 

Could you explain the class field again. It's a pity that there is nothing about that in the docs. But If I for example would have the icon green. How will it know where to target that icon ? If i use "icon" as a class. How will it know which icon i am referring to.

 

If i do this

.ibox .ibox-media .ibox-icon-border.media-type-icon i {
color: green;
}

Could I have done that in simpler manner with the class field?


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
Danny

The Styling classes field is for you to add unique styling to that particular section. For example, if you want to add a red background to that section, you could create the following:

 

my-red-background {
background-color: red;
}

 

Then in the styling classes field add the the class name i.e. my-red-background and then click publish, refresh your site and that section should have a red background.
 

This is covered in our documentation here - http://docs.pagelines.com/tutorials/section-area-styling


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pehja

Yes, background is fine. If the css is for the section then the section will be targeted. But if i want to target like my example above. The icon?. or the icon hovered? The icon is within that section.  


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
Danny

The styling classes are for either predetermined CSS such as the utility classes which can be found here - http://docs.pagelines.com/tutorials/html-css-utilities

 

Or for classes you have created, if you want to target an icon and add styling for that particular box, then you will need to inspect the element using your browsers developer tools and add this CSS to your custom CSS.

 

However, if you're trying to target a specific box from the iBox section, that is slightly more tricky and you will need to use pseudo classes such as nth or last child etc..

 

You can find more information here - http://css-tricks.com/pseudo-class-selectors/

 

If you would prefer to have a styling classes field for each box in iBox, I recommend you create a issue on our tracker here - https://github.com/pagelines/DMS/issues?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pehja

So one would think placing .img-rounded, in the class section it would make the circled box rounded, but it doesn't.


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites
Danny

No, why would img-rounded work ?

You're adding the class to the actual section not an image. Img-rounded works on images, you cant use that class on a section when a section isn't an image to begin with.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pehja

I was under the impression that iBox was a section. and you could create your own classes in the sections. But this means that you can only create classes for the sections it self, and not images within that section. If I want to target something in the section I have to use inspection tools and custom CSS as I normally do. 

 

My misstake!


Professionell musician | Webbdesigner | Apple freak

Pehja Production.png

Share this post


Link to post
Share on other sites

×