HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


.box_inner

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#91620 (In Topic #18416)
Avatar

Community saint

Wanted to change the colors of the top of boxes…   

in the css, I commented out background-color because there is a background-image … seemed something wasn't right.

Code

.box_inner>h1, .box_inner>h2, .box_inner>h3, .box_inner>h4, .box_inner>h5, .box_inner>h6, .toggleable_tray_title, #standalone_html_wrap .box .box .box_inner>h2, #standalone_html_wrap .box .box .box_inner>h3 {
   {$BETA_CSS_PROPERTY,border-top-left-radius: 3px;}
   {$BETA_CSS_PROPERTY,border-top-right-radius: 3px;}
   /*background-color: {$GET,box_title_background};*/
   background-image: url('{$IMG;,gradient}');
   background-repeat: repeat-x;
   color: {$GET,box_title_text};
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   font-size: 1em;
   border: 0;

   /* .box_inner set us in the wrong position, so fiddle around a bit to move us back to be flush */
   margin: -0.506em 0 0.506em -0.506em; /* Would be -0.5 but Opera does not seem to like */
   padding: 0.4em 0.8em 0.4em 0.3em;
   width: 100%;
}

This get's rid of the default blue… but it's not picking up gradient.png at all…   see this:



my images_custom/gradient.png is:



So why does it not show up?

Paul
Back to the top
 
Posted
Rating:
#91621
Avatar

Modern browsers have very good tools for seeing what properties are being applied to elements, and their precedences.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#91625
Avatar

Community saint

Yeah, this one shows:

Code

<section class="box box___block_side_stored_menu_embossed">
<div class="box_inner">
<h3>{$SITE_NAME}</h3>

So it is using box_inner as shown above.  I don't know much CSS, but it appears the CSS in the first post does apply to class box_inner h3 ..  Thus my confusion on why it doesn't pick up the graphic image.

Paul
Back to the top
 
Posted
Rating:
#91626
Avatar

Community saint

Interestingly, this code is around the 'news' block

Code

<section class="box box___block_no_entries_news">
<div class="box_inner">
<h3>News</h3>
<p class="nothing_here">There is no news yet</p>

yet on the news block, it picks up the gradient.png graphic…   

So why does one 'box_inner' get it but not the other…?    Above that they both use 'box'  but the second 'class' for the section is different, supposed I should look there, but it seems that 'box_inner' would override whatever comes before it…

Example how some pick it up, some don't.



Paul
Back to the top
 
Posted
Rating:
#91627
Avatar

Community saint

The gradient image applies to the class="box_inner" which is used for all boxes inclusive of the side panels.
If I understand you correctly, you want to apply a different gradient to the side panel box_inner.
You may want to try this:
Upload a new gradient2 codename image
Create a new selector below the one you quote above for the global_side_panel h3:

Code

.global_side_panel .box_inner > h3 {
background-image: url('{$IMG;,gradient2}');
background-repeat: repeat-x;
}
 

Hope this helps,

Jean
Back to the top
 
Posted
Rating:
#91628
Avatar

Community saint

It seems I should not have to create anything new, as all the boxes use .box_inner..

As example, the page source around the 'site menu' menu on the left side box:

Code

<div id="panel_left" class="global_side_panel" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
<div class="stuck_nav">
<section class="box box___block_side_stored_menu_embossed">
<div class="box_inner">
<h3>{$SITE_NAME}</h3>

What firebug puts out as what h3's CSS is:

Code

.box_inner > h1, .box_inner > h2, .box_inner > h3, .box_inner > h4, .box_inner > h5, .box_inner > h6, .toggleable_tray_title, #standalone_html_wrap .box .box .box_inner > h2, #standalone_html_wrap .box .box .box_inner > h3 {
  background-image:url(http://www.downwardslide.com/ocp/themes/default/images_custom/gradient.png);
  background-repeat:repeat no-repeat;
  border:0;
  border-top-left-radius:3px;
  border-top-right-radius:3px;
  color:#FFFFFF;
  font-size:1em;
  font-weight:bold;
  margin:-0.506em 0 0.506em -0.506em;
  padding:0.4em 0.8em 0.4em 0.3em;
  text-align:center;
  text-decoration:none;
  width:100%;
}
global.c...348235642
.global_side_panel .box_inner > h1, .global_side_panel .box_inner > h2, .global_side_panel .box_inner > h3, .global_side_panel .box_inner > h4, .global_side_panel .box_inner > h5, .global_side_panel .box_inner > h6 {
  background-image:none;
}
global.c...348235642
.box___block_side_stored_menu_embossed > .box_inner > h3 {
  margin:0;
  padding-left:0;
  padding-right:0;
}
global.c...348235642
h1, h2, h3 {
  border-bottom-color:#C1CEE3;
  border-bottom-style:solid;
  border-bottom-width:1px;
  color:#325180;
  font-weight:normal;
}
global.c...348235642
h3 {
  font-size:1.1em;
}
global.c...348235642
Inherited fromdiv#panel_left.global_side_panel
.global_side_panel {
  color:#3D434C;
}
global.c...348235642
Inherited frombody#main_website.website_body
body.website_body, #htmlarea {
  font-size:13px;
}
global.c...348235642
body.website_body {
  color:#0D1522;
}
global.c...348235642
body, textarea, input, td, th {
  font-family:'Open Sans', 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

but firebugs 'computed' shows for the above:

Code

Background
background-color   rgba(0, 0, 0, 0)
background-image   none
background-repeat   repeat-x
background-position   0 0
background-attachment   scroll
opacity   1

So something is overriding .box_inner background-image …

Whereas the center boxes (ie the news box as seen in the image in a previous post), the page source is:

Code

<div class="fp_col_blocks_wrap">
<div class="fp_col_block left">
<section class="box box___block_no_entries_news">
<div class="box_inner">
<h3>News</h3>

firebug shows the CSS for this one as:

Code

.box_inner > h1, .box_inner > h2, .box_inner > h3, .box_inner > h4, .box_inner > h5, .box_inner > h6, .toggleable_tray_title, #standalone_html_wrap .box .box .box_inner > h2, #standalone_html_wrap .box .box .box_inner > h3 {
  background-image:url(http://www.downwardslide.com/ocp/themes/default/images_custom/gradient.png);
  background-repeat:repeat no-repeat;
  border:0;
  border-top-left-radius:3px;
  border-top-right-radius:3px;
  color:#FFFFFF;
  font-size:1em;
  font-weight:bold;
  margin:-0.506em 0 0.506em -0.506em;
  padding:0.4em 0.8em 0.4em 0.3em;
  text-align:center;
  text-decoration:none;
  width:100%;
}
global.c...348235642
h1, h2, h3 {
  border-bottom-color:#C1CEE3;
  border-bottom-style:solid;
  border-bottom-width:1px;
  color:#325180;
  font-weight:normal;
}
global.c...348235642
h3 {
  font-size:1.1em;
}
global.c...348235642
Inherited frombody#main_website.website_body
body.website_body, #htmlarea {
  font-size:13px;
}
global.c...348235642
body.website_body {
  color:#0D1522;
}
global.c...348235642
body, textarea, input, td, th {
  font-family:'Open Sans', 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

and it's 'computed' actually has the background image:

Code

Background
background-color   rgba(0, 0, 0, 0)
background-image   url(http://www.downwardslide.com/ocp/themes/default/images_custom/gradient.png)
background-repeat   repeat-x
background-position   0 0
background-attachment   scroll
opacity   1

So why are two different div's that use box_inner>h3 giving different results?  One loads the bg image, one does not…

That is my confusion.


Paul
Back to the top
 
Posted
Rating:
#91629
Avatar

Community saint

Which now that I can look at them side by side, it appears .global_side_panel actually set's background image to none for box inner>h3

Will undue that and see if I get the results I want.

Paul
Back to the top
 
Posted
Rating:
#91630
Avatar

Yeah, I just checked the CSS and saw I'd left this comment:
"/* Don't let boxes on side panels get too much styling (focuses the eye away) */"

I suppose one disadvantage to the likes of Firebug is it kind of obscures comments.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#91631
Avatar

Community saint

Arbo said

Which now that I can look at them side by side, it appears .global_side_panel actually set's background image to none for box inner>h3

Will undue that and see if I get the results I want.
Yes, you can apply the gradient to all of the side_panel heading elements with this one or make a new selector for specific ones.
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#91633
Avatar

Community saint

Yeah, that worked… also added the same gradient to .wide_table_wrap thead tr th  .. so it shows the same in the forums.

@Chris, I don't think a simple gradient is 'too much' styling..  Rather I like that all boxes that have a 'header' of sort, to be pretty much the same.    BTW, I don't know what else there is on mac other than firebug…

Paul
Back to the top
 
Posted
Rating:
#91637
Avatar

@Chris, I don't think a simple gradient is 'too much' styling..  Rather I like that all boxes that have a 'header' of sort, to be pretty much the same.    BTW, I don't know what else there is on mac other than firebug…

Well, we're just really taking the design idea that focus should be on the content. Every site is different, there's perfectly justifiable reasons for wanting more focus on the features or the navigation or whatever. We just try and make commonly-acceptable defaults :).

My comment wasn't really about Firebug. Firebug's a great tool. Was just a general followup to my suggestion those tools are useful, as in this case it had actually obscured useful info rather than showing it.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: