Archived

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

  • 0

Add Custom Css Class To Boxes


Question

Posted · Report post

I want to color the h3 headline in a dark gray and the following text also in a gray tone.

How can I do this?

If I have understood it right I shall use the field in the bottom of the edit page meta settings (choosing boxes)

There I find the Custom CSS Class

and the field with this text above.

"Att custom css class to these boxes"

Is there any video or good guide which describes how you shall write the syntax in this field?

I have looked into some CSS guides since I am a complete rookie on CSS and tried some but nothing happens.

I have used firebug and tracked it to the h3 header. And found this type of code if the text is gray.

#boxes .fboxtext { . 
font-size: 16px; . 
color: rgba(0, 0, 0, 0.4) }

But this line of code is nothing I can use in this field or is it?

Nothing happens when I insert and Save the Meta Settings.

Can someone please help me on this? I would be really thankful! :)

Share this post


Link to post
Share on other sites

16 answers to this question

Posted · Report post

Yup, thats possible, every box is given a unique ID, you can use these ID's to to style each individual box.

 

For example, your "digitaal lesstof" box has an ID of fbox_1324, so you can use that to style that box.

 

#fbox_1324 {
border: 1px solid red;
} 

http://d.pr/i/4dlC

Share this post


Link to post
Share on other sites

Posted · Report post

Hi zymondee

I´m a newbie too but you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

For example you can add

#boxes .fboxtext { 
color: dimgray }

It is advisable to learn how to do this on your own too.

Check out http://www.pagelines...wiki/Custom_CSS

Also you can go

http://www.w3schools..._colornames.asp

or

http://html-color-codes.info/

and select the color as you like

You may also use color codes there, such as #C00000 , if you wish to use more specific colors.

If you post your site's url is more easy to resolve the issue.

;)

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

Did Batman's suggestion resolve your issue ?

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you so much Batman!!

You made my day cause it worked like a charm!

But it would also be great to be able to customize it for single pages aswell I think.

It is a pity it does not work in the meta settings for the page as a described.

Cheers!

Hi zymondee

I´m a newbie too but you can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

For example you can add

#boxes .fboxtext { 
color: dimgray }

It is advisable to learn how to do this on your own too.

Check out http://www.pagelines...wiki/Custom_CSS

Also you can go

http://www.w3schools..._colornames.asp

or

http://html-color-codes.info/

and select the color as you like

You may also use color codes there, such as #C00000 , if you wish to use more specific colors.

If you post your site's url is more easy to resolve the issue.

;)

Share this post


Link to post
Share on other sites

Posted · Report post

Yes!!

Hi,

Did Batman's suggestion resolve your issue ?

Share this post


Link to post
Share on other sites

Posted · Report post

But it would also be great to be able to customize it for single pages aswell I think.

It is a pity it does not work in the meta settings for the page as a described.

Cheers!

What do you mean ?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi!

I have been having the same problem. I have used this code to target one of the boxes, unfortunately it did not work. But i really want to target a whole set of boxes.

 

I tried both these:

 .fbox_1387
.inline_thumbs .fboxgraphic {
    border: 1px solid black;
    padding-top: 5px;
border-radius: 0px 25px 25px 0px;}

 

and this(adding #boxes):

#boxes .fbox_1387
.inline_thumbs .fboxgraphic {
    border: 1px solid black;
    padding-top: 5px;
border-radius: 0px 25px 25px 0px;}

 

the id is 1387, which I found using firebug. I really want to change the look of all the boxes on that particular page, preferably using a background image. Is this possible?

 

Thanks,

 

Tamar

Share this post


Link to post
Share on other sites

Posted · Report post

Should I use:

#boxes_clone_2 or

or .fboxes fbox

 

Why do I see fboxes and #boxes for seemingly the same thing?! Sorry, I'm just a beginner at this css, it's worse than learning french!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Tamar,

 

If it is just for that page, you can use the page id class, which is in the body class, you can find it using FireBug.

 

However, you can also use the Custom Class option which adds this class to your box set that can be used to style these boxes.

Share this post


Link to post
Share on other sites

Posted · Report post

Should I use:

#boxes_clone_2 or

or .fboxes fbox

 

Why do I see fboxes and #boxes for seemingly the same thing?! Sorry, I'm just a beginner at this css, it's worse than learning french!

 

You can use this which should help you.

 

.page-id-1183 .section-boxes {
background: red;
}

Which looks like this:

 

http://d.pr/i/XksW

Share this post


Link to post
Share on other sites

Posted · Report post

Yes! That worked... Thank you. Now only one last detail. I would like to have a border around each box. Is that possible too?

Share this post


Link to post
Share on other sites

Posted · Report post

Figured it out!

.page-id-1001  .fbox{
background: white;
    border: 1px solid black;
    padding-top: 5px;
border-radius: 25px 25px 25px 25px;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you Danny! Excellent..

Share this post


Link to post
Share on other sites

Posted · Report post

I have a similar question. I would like to make a CSS change on one particular box--I need to add a border to the graphic on only that one box (rather than to all my boxes). 

 

1. I inspected the element to come up with the following selector: div.fboxgraphic a img{

 

2. Then I added this rule to the Boxes custom class field on the box i want to modify:  div.fboxgraphic a img{border-style:solid; border-width:5px;}

 

2a. if I understand correctly, this should:

add a 5px, solid border to any <img> tag 

contained within an <a>

contained with a <div> with class=fboxgraphic

 

No results. I can't tell if my selector is wrong, or if there is some other reason why my CSS rule is not being applied.

 

Thanks.

 

 

Share this post


Link to post
Share on other sites

Posted · Report post

No problem, happy to help!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, you can target one box on the entire site. If you look slightly higher up the html code you'll see each box will be issued with an ID. You can use the box id followed by the items you want to target inside that box to make the changes. Also depending on which setup for you have for where the images are placed in the box (top,left,right) the css can change, so make sure you look for .inline_thumbs or .top_thumbs etc

 

 

#fbox_5
.inline_thumbs .fboxgraphic {
    border: 1px solid black;
    padding-top: 5px;
}

Share this post


Link to post
Share on other sites