Simple to do along with other customizations. I am using Greek Yogurt theme and have changed the body, header and footer color to #000048. But there is a problem- the body or header/footer seem to have a thin vertical gradient to white on the edge. You can see in the example attachment .png Is there a way to change this to solid?

Thanks

That is the background drop shadow and the only way to change it is with css.

You need to copy the relevant css rule(s) from the theme's main.css and paste them into the css box in the customise theme page, then edit the css you have copied to remove or change the colour of the shadow.

This should make your css more specific than the main.css and hence prevail when the css specificity is worked out by browsers.

If it does not, you may want to append !important to the edited rules to force them to dominate.

Hi John,

Thanks for the reply. I understand the principle but I think I'm either missing the target or my syntax is wrong [or both]


I think this is the correct .css file
/ httpdocs / concrete5 / concrete / themes / greek_yogurt / main.css
which already has


do I skip a line or put in any special characters before going to your sugesstion?


This is the only part of the file refering to 'shadow'

I have tried changing color to #000048 which is the body color I want
Tried changing 2px to 0 px

Tried adding !important but probably not in the correct way-
as: box-shadow: 2px 0 8px 0 #000048;{color: #000048 !important;}

Rermoved this
font-family: 'Merriweather', Georgia, serif; line-height: 1.8em; font-size: 14px;

and tried entering again the above attempts.

Always clicked both the OK button and Save and got messages back that "Theme has been updated"

Cleared cache several times


I'm either in the wrong place or missing something.

Bill

Changing the line: box-shadow: 2px 0 8px 0 #b2b9c1;
to: box-shadow: 2px 0 8px 0 #000048;

Should be sufficient to change the color. The 2px and the 8px are the width of the shadow on the left and right respectively. Changing these to zero would remove the shadow altogether.

To do things the way John pointed out, simply follow his directions to the customize area and click to add css. Paste:

div#main-container {
margin-top: 0;
margin-bottom: 0;
box-shadow: 2px 0 8px 0 #000048 !important;
}

in the box and save it. Should do the trick !!

Hi Enlil and Thanks - added to John's info I'm getting to understand what the .css is saying - and re: the 2px/8px - yes the right side is definetely wider than the left

I gave the following a try:
1st I removed the other instruction re fonts.

then pasted in your suggestion:
div#main-container {
margin-top: 0;
margin-bottom: 0;
box-shadow: 2px 0 8px 0 #000048 !important;
}

saved/cleared cache and went back to site and refreshed page
No luck/no change

So I tried
div#main-container {
margin-top: 0;
margin-bottom: 0;
box-shadow: 0px 0 0px 0 #000048 !important;
}
No so then I removed the color hex
div#main-container {
margin-top: 0;
margin-bottom: 0;
box-shadow: 0px 0 0px 0 !important;
}

No so then I removed the entire box-shadow line
div#main-container {
margin-top: 0;
margin-bottom: 0;
}

No BUT when I refreshed the page there was a noticable 'blink' but when the page settled still no change. Maybe that was progress?

If you'd like to look at my site please send me a message and I'll let you in.


OR would it be worth a try to, instead of adding Custom Rules, just edit the main.css itself (I have already destroyed/lost all my work once before so want to avoid that fate again)

I think the concept you are missing is that the individual rules within each style are cumulative to those in main.css (and any other css loaded).

So simply cutting a rule you don't like will just result in the original rule in main.css shining through.

So for each rule in main.css you want to change, you need to displace it with a stronger rule in the css panel.

The other thing that will be complicating issues are caches. There is a concrete5 cache where the css from the panel you are editing is assembled. This should be updated automatically when you save, but you can make sure by clearing the concrete5 cache in the dashboard.

There is also a browser cache. Browsers like google chrome have a very sticky css cache. It makes chrome fast, but its reluctance to re-load a changed css file can be a nuisance. You will need to refresh a page a few times with F5 and CTL+F5 to get chrome to fully refresh a page's css.

You can also install chrome developer extensions. I use one called 'Pendule' for css refreshing.

While on the subject of developer stuff, if you are developing css you will find the developer console very useful for testing ideas and seeing which rules are dominating. See
http://www.concrete5.org/documentation/how-tos/editors/getting-help...
(last section).

Also see
http://www.concrete5.org/documentation/how-tos/designers/absolute-b...
You are already beyond most of what is in there, but you may find some of the references and books educational. I still find the book 'CSS the missing manual' a useful reference.

With that all said, the rules @enlil suggested look like they should work for you, once you have got them through the various caches.

PS

You can also try (within a rule)

John,

Thank you for the lesson - you are a great teacher and also thanks for the compliment! I will follow your links and see what else I can pickup.

PROBLEM SOLVED!

Simply using the one line:
box-shadow:none!important; WORKED

so based on that [using just the one line/rule]
I tried:
enlil's
box-shadow: 2px 0 8px 0 #000048 !important; Worked
and
box-shadow: 0px 0 0px 0 !important; Worked
and
box-shadow: 0px 0 0px 0 #000048 !important; Worked
and Tried for fun
box-shadow: 10px 0 20px 0 !important; just to get exaggerated result Worked

Note: when the changes worked the result could be seen in the preview panel of the Customize .css page. When they didn't work no change was seen - guess that's why there is a preview panel.