16 replies to this topic

[zymondee]

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!

[batman]

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

Please Login or Register to see this Hidden Content

Also you can go

Please Login or Register to see this Hidden Content

or

Please Login or Register to see this Hidden Content

and select the color as you like

You may also use color codes there, such as

Please Login or Register to see this Hidden Content

, if you wish to use more specific colors.

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

[Danny]

Hi,

Did Batman's suggestion resolve your issue ?

[zymondee]

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

Please Login or Register to see this Hidden Content

Also you can go

Please Login or Register to see this Hidden Content

or

Please Login or Register to see this Hidden Content

and select the color as you like

You may also use color codes there, such as

Please Login or Register to see this Hidden Content

, if you wish to use more specific colors.

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

[zymondee]

Yes!!

Hi,

Did Batman's suggestion resolve your issue ?

[Danny]

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 ?

[agumperz]

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.

 

 

[James B]

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

 

 

Please Login or Register to see this Hidden Content

[tamarpostma]

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

[tamarpostma]

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!

[Danny]

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.

[Danny]

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.

 

Please Login or Register to see this Hidden Content

Which looks like this:

 

Please Login or Register to see this Hidden Content

[tamarpostma]

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

[tamarpostma]

Figured it out!

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

[Danny]

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.

 

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

[tamarpostma]

Thank you Danny! Excellent..

[Danny]

No problem, happy to help!