Jump to content


Photo
- - - - -

Add Custom Css Class To Boxes

boxes customCSS CSS

Best Answer Danny , 29 January 2013 - 11:59 AM

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

Go to the full post


  • Please log in to reply
16 replies to this topic

#1 zymondee

zymondee

    Newbie

  • Members
  • 3 posts
  • LocationSWEDEN
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 13 November 2012 - 08:30 PM

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! :)

#2 batman

batman

    Bat Learning

  • Members

  • 2167 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 13 November 2012 - 10:00 PM

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 likes this

#3 Danny

Danny

    Is Awesome!

  • Moderators
  • 17139 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 November 2012 - 08:16 AM

Hi,

Did Batman's suggestion resolve your issue ?
  • zymondee likes this

#4 zymondee

zymondee

    Newbie

  • Members
  • 3 posts
  • LocationSWEDEN
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 14 November 2012 - 09:36 AM

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.
;)



#5 zymondee

zymondee

    Newbie

  • Members
  • 3 posts
  • LocationSWEDEN
  • Framework Version:2.3.5
  • Country: Country Flag

Posted 14 November 2012 - 09:36 AM

Yes!!

Hi,

Did Batman's suggestion resolve your issue ?



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17139 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 November 2012 - 10:14 AM

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 ?

#7 agumperz

agumperz

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 11 December 2012 - 12:35 AM

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.

 

 



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 December 2012 - 01:34 AM

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



#9 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 29 January 2013 - 11:13 AM

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



#10 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 29 January 2013 - 11:35 AM

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!



#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 17139 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 January 2013 - 11:44 AM

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.



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 17139 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 January 2013 - 11:46 AM

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



#13 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 29 January 2013 - 11:52 AM

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



#14 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 29 January 2013 - 11:57 AM

Figured it out!

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



#15 Danny

Danny

    Is Awesome!

  • Moderators
  • 17139 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 January 2013 - 11:59 AM   Best Answer

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



#16 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 29 January 2013 - 12:08 PM

Thank you Danny! Excellent..



#17 Danny

Danny

    Is Awesome!

  • Moderators
  • 17139 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 January 2013 - 12:09 PM

No problem, happy to help!







Also tagged with one or more of these keywords: boxes, customCSS, CSS