[Anonymous]

Anonymous

#9461

Hi,

Is there way to add a shadow like here: http://ucalgary.ca/utoday/issue/2014-10-17/first-canada-excellence-research-chair-created-university-calgary to the Site Title of WordPress?

I tried:

/*

Testing site title text/image

*/

.header_title push_1 grid_15, .header_desc push_1 grid_15{

-webkit-box-shadow: rgba(0,0,0,0.25) 0 3px 12px !important;

-moz-box-shadow: rgba(0,0,0,0.25) 0 3px 12px !important;

box-shadow: 0 3px 12px rgba(0,0,0,0.25) !important;

background: rgb(204, 204, 204) !important; /* Fallback for older browsers without RGBA-support */

background: rgba(204, 204, 204, 0.5) !important;

}

The reason why I am trying this because this way I can have any background image and yet the reader will be able to read the title of the site because of shading in the background.

I tried Googing with no success.

I know this is not directly related to the Graphene Theme, but I thought of asking here…

Thank you.

[Anonymous]

Anonymous

#43650

Please keep in mind the following changes should only be made in your child theme’s css file and not in the original css file of graphene.

This would be the value:

background-color: rgba(0, 0, 0, 0.5);

If you add this to “.header_title” the transparent background will not have the full width of the header. I played around with your site and I think I got it to work.

1. Add to #header .header_title:

background-color: rgba(0, 0, 0, 0.5);

width: 960px;

2. Delete or cancel it out in .container_16 .push_1:

left: 60px; or change it to 0px

3. Add/change in .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16

display: inherit;

float: left;

padding-left: 10px;

Remove the 2 original “margin” values or change from 10px to 0px.

Now basically you gotta do the same with the description below the site title in order to have transparent background for it. Use Firefox “Inspect Element” or Firebug to test it out first and then apply the changes you made there to you child theme’s css file.

Image: https://cdn.anonfiles.com/1413774822460.png

[Anonymous]

Anonymous

#43651

Thank you so much for the response. I will look into this next Friday cause it’s midterms time. 🙂

[Kenneth John Odle]

Kenneth John Odle

#43652

It’s probably best to avoid messing with .grid_$ values, as those affect page layout.

However, you can accomplish the same thing just by targeting #header .header_title and #header .header_desc, like this:

#header .header_title,

#header .header_desc {

background-color: rgba(0, 0, 0, 0.5);

left: 0px;

width: 100%;

margin: 0px;

padding: 10px;

}

The left, width, and margin options above make it appear all the way across your header. Use the padding (or padding-left) to better control its placement.

background-color: rgba(0, 0, 0, 0.5);

I have never thought of setting background transparency like this. Until now, I’ve always used a transparent .png (which, of course, adds another http call to the server). This is brilliant.

[Anonymous]

Anonymous

#43653

Thank you so much Ken. You always come up with great solutions. I was looking for a CSS solution too. This is perfect and I only just changed the darkness and the length of shade.