Problem with X -> Theme Options -> CSS

Support
#1

Hi there,

i have problems with the css settings. As can be seen in the screenshot, the page in the css settings is displayed completely differently than in the frontend (red framed areas)

Also, I can not adjust the color of the border around the main content, since this is set to # FF0000 in the CSS, it will still be in # 3C1D17 shown. Where is my mistake? What can I do here?
https://anders-sport-treiben.de/2019/

Tanks and best regards Blume

#2

Hi Blume,

Can you clarify the style issue with the menu please?

Font colors of the following text

copyright: AST - Anders Sport Treiben Arnsdorf
Technische Umsetzung:

is because of the following CSS:

h5 {
    color: #ff0000;
    font-size: 16px;
    font-family: Arial;
    font-weight: 800;
    padding-left: 0px;
    padding-right: px;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-top: 0px;
    text-shadow: 1px 1px 1px #111111;
}
h4 {
    font-size: 25px;
    font-family: Arial;
    font-weight: 900;
    color: #ff0000;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 5px;
    margin-top: 0px;
    text-shadow: 1px 1px 1px #000;
}

Is that CSS intended or not? Try to remove color part of the custom CSS and you will get the same result on your screenshot. Using general selector like h4 or h5 on CSS mean it will affect all headlines on the entire site. We should be mindful on using general selectors. It would be better to use specific ones like IDs and Class. See this guide please.

Regarding border, the error is in this part:

.x-main {
    background: rgba(239,239,239,0.8);
    border-style: solid;
    border-width: 8px 8px 0px;
    -moz-border-color: #FF0000 29 round;
    -webkit-border-color: #FF0000 29 round;
    -o-border-border-color: #FF0000 29 round;
    border-border-color: #FF0000 29 round;
    border-radius: 18px 18px 0px 0px;
    margin-top: -30px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 10px 10px 11px;
    margin-bottom: 0px;
}

It should be like this:

.x-main {
    background: rgba(239,239,239,0.8);
    border-style: solid;
    border-width: 8px 8px 0px;
    -moz-border-color: #FF0000;
    -webkit-border-color: #FF0000;
    -o-border-border-color: #FF0000;
    border-color: #FF0000;
    border-radius: 18px 18px 0px 0px;
    margin-top: -30px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 10px 10px 11px;
    margin-bottom: 0px;
}

Please check this guide regarding border. Please take note on how shorthand really works.

Hope this helps.

#3

Hi Lely,

Thanks for the solution with the border, this works fine!
However, I have probably wrong with the gray areas in the screenshot wrongly expressed, the problem is only in the theme option CSS because it will not be correct as in the past, but as shown in the screenshot shown completely wrong. Should I give the access data once?

Tanks and best regards Blume

#4

Hey Blume,

I’m sorry but I’m still not sure what you’re trying to achieve. Would you mind clarifying first what you mean by:

What is not correct with the theme options? We have no bug on record that the Theme Options does not work nor cause CSS issues.

If you have a custom CSS issue, you can paste your code in CSS validators like http://csslint.net/ and it will tell you where the errors are or what you’re doing wrong. Please note that we do not have support for custom code.

Thanks.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.