Forums

Overriding the original .CSS style sheet in the CSS Design Box

Permalink
I imported the "Vegas" add-on. It is a feature that displays a full screen slideshow as your webpage background. I don't want the pictures to start at the top of the page, I'd like to create a margin at the top, or specify a relative position(so it will display lower on the page). In the CSS section of the Set Block Style under the Design tab, I've tried entering some css but it doesn't seem to be over riding the original .CSS stylesheet. I don't have access to the original style sheet, so the simple solution of just changing that code is not an option.
In the CSS section I have tried a couple things :

div[style] {
margin-top:100px !important;
}

or

div {
margin-top:100px;
}

or

div {
position:relative;
top:100px;
}

What tricks are there or what can I do to override the original .css file?
 
INTcommunications replied on at Permalink Reply
INTcommunications
Not sure why you would not have access to the css. You can make a copy of the whole add-on and rename it or use a custom template to change the view.css to your liking - there are tons of ways to override or change the css.

First thing is to get the right classes or IDs with the direct css path to the affected element.

Open firebug in firefox - go to the inspect element and hover and click in the right spot and get the full css path for whatever you want to over write. So if your Vegas has simple css like you posted div{margin-top:100px;} but the actual path is in a body element then body divName {css code;} is the actual path.

Simple explanation - if an element is in a div container name div1 inside a another div container( div 2 ) and is in a paragraph tag, then the css would be


.div1 .div2 p {color:#000;}

would over write if the original is
.div2 p {color:#ccc;}

Sometimes putting an id in the body tag will do the trick
so in your html
<body id="home">

And then
#home .div2 p {would make it a unique identifier and any css would only affect this element }

Anyway inspecting the element with firefox is the key - you can get exact css identifiers with that tool. also like you tried add the !important; just to make sure.

One more also - If you over write css make sure you either copy the whole css into an override folder or make sure that your theme is linked to the css page you are placing- check view source and make sure it is being called after the original.

So, if your css is main.css - you either add another css page say named main2.css and then add it into the header.php of whatever theme you are using or copy the whole css page and place it in a override folder from the root of the concrete site

i.e. -https://www.concrete5.org/documentation/introduction/overrides

orhttps://www.concrete5.org/documentation/how-tos/developers/change-th...
Kaitigilbert replied on at Permalink Reply
Thank you! I don't have access to the css because I am an administrator on the webpage and I don't have permissions to access those files. I will give your instructions a try and see what I can do! Thanks!