• Resolved seanmyers

    (@seanmyers)


    Hi,

    I am wondering if anyone can tell me the priority of CSS within the Customizr theme/WordPress in general. I have created a child theme for customizr to make changes to the styling of the website, this was working great for most parts, however some things would be ignored and only appear if I chose to edit CSS under the appearance tab of wp-admin. This styling would then work.
    I’d much rather have everything within the child theme, mainly due to the fact it can be seen whilst loading each page.

    Can anyone tell me why this might be happening?

    Thanks,
    Sean

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter seanmyers

    (@seanmyers)

    Okay, so the problem just seems to be getting worse. It appears that anything I add in the child is getting completely ignored, I’ve check for strayed comments etc. and can’t see anything.

    Has anyone ever had this issue before?

    Thanks,
    Sean

    Hi,
    you have to activate your child-theme and use it as your main theme.

    Thread Starter seanmyers

    (@seanmyers)

    Hi,
    Child theme is active, maybe I should explain in more detail.

    My child theme stylesheet currently contains these styles:

    /*
    Theme Name: Function
    Version: 1.0
    Description: A child theme of Customizr
    Template: customizr
    Author: Administrator
    */
    /* Your awesome customization starts here */
    
    .tc-header{
    	border-bottom: 5px solid #736357;
    }
    
    /* Adjust Menu colors - Normal */
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter {
    	color: #736357;
    }
    /* Adjust Menu colors - Hover */
    .navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
    	color: #736357;
    	text-decoration: underline;
    }
    /* Adjust Menu colors - Active */
    .navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
    .navbar .nav > li.current-menu-item > a,
    .navbar .nav > li.current-menu-ancestor > a,
    .navbar .nav > li.current-menu-item > a:first-letter,
    .navbar .nav > li.current-menu-ancestor > a:first-letter {
    	color: #736357;
    	text-decoration: underline;
    }
    
    .social-block a{
    	color: #736357;
    	top:5px;
    }
    
    .social-block a:hover{
    	color: #736357;
    }
    
    .my-social-menu-search {
    	display: inline-block;
    }
    
    .my-social-menu-search .search-field {
    	width: auto;
    margin-top: 1%;
    }
    
    #menu-page-navigation-2{
    	color: #736357;
    }
    .login-float-login a:hover, .login-float-register a:hover, .login-float-login a:focus, .login-float-register a:focus{
    	color: #736357;
    	text-decoration: underline;
    }
    
    .login-float-login a:active, .login-float-register a:active {
    	color: #736357;
    	text-decoration: underline;
    }
    
    .login-float-login a, .login-float-register a {
    	color: #736357;
    	font-weight: normal;
    }
    
    .login-float-container{
    	border-top:none;
    	height:35px;
    	width:150px;
    	min-height:30px;
    	height:auto;
    	min-width:150px;
    	z-index:100;
    	top:1%;
    	text-align:center;
    	font-size:17px;
    	padding-top:15px;
    	position: absolute;
        	right: 3%;
    	color: #736357;
    	font-weight: normal;
    }
    #prices{
    	width:50%;
    	margin-left:25%;
    }
    table, th, td{
    	border: 1px solid black;
    	border-collapse: collapse;
    }
    
    .navbar .nav > li > a {
    	padding:0px;
    	margin-left:20px;
    }
    
    .navbar div > ul.nav > .menu-item:first-child a{
    	margin-left:0px;
    }
    
    /*Stop the display of the Search button */
    .my-social-menu-search .search-submit {
        display: none;
    }
    /* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
    .my-social-menu-search .search-form .screen-reader-text {
        position: absolute;
        left: -9999px;
        overflow: hidden;
    }
    
    // Style the search input textbox
    .my-social-menu-search .search-field {
        background: white;
        color: #736357;
    border: none;
        -webkit-box-shadow:    none;
        -moz-box-shadow:       none;
        box-shadow:            none;
        cursor: pointer;
        height: 26px;
        margin: 2px 0 2px 0;
        padding: 0 0 0 36px;
        -webkit-transition: width 400ms ease;
        -moz-transition:    width 400ms ease;
        -o-transition:      width 400ms ease;
        transition:         width 400ms ease;
    	width: 500px;
    }
    
    .my-social-menu-search .search-field {
        color: #736357;
        /* change the colour above if you are working with a dark navbar background */
        border: 2px solid #736357;
        cursor: text;
        outline: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow:    none;
        box-shadow:         none;
        margin: 0;
    }
    
    /* Expand the search box when you click it */
    .my-social-menu-search .search-field:active,
    .my-social-menu-search .search-field:focus{
     color: #736357;
        /* change the colour above if you are working with a dark navbar background
        }
    
    /* Add a magnifying glass background */
    .my-social-menu-search .search-form:before {
        font-family: 'genericons';
        content: '\f400';
    width: 5px;
    position: absolute; /* this is the key to put it visually inside the search field */
        font-size: 19px;
        font-weight: bold;
        padding-top: 5px; /* tune this vertical alignment inside the search field, as needed */
        padding-left: 5px; /* tune this horizontal alignment inside the search field, as needed */
    	color: #736357;
    	z-index: 100;
    }
    
    .navbar-inner .social-block {
    margin: 3px;
    }
    
    .uneditable-input:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus {
        border-color: #736357;
    }
    
    button, input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"], label, select {
        cursor: auto;
    
    .uneditable-input:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="datetime"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, textarea:focus {
    	border-color: #736357;
    }
    
    //make appointment
    
    .appointments-wrapper {
    	width: 50%;
    	background-color: white;
    }
    
    .cleanlogin-container{
    	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
    }

    However sometimes when adding new styling, I found this particularly with background changes and a few other bits, it would not appear. I therefore out these changes into the ‘edit CSS’ tab under appearance, rather than the child stylesheet. So far this is what is under the ‘Edit CSS’ section as it wasn’t working within the child:

    /*
    Welcome to Custom CSS!
    
    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.
    
    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don't need to copy all
    your theme's stylesheet content.
    */
    //new
    
    .colophon {
    	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
    	background-color: #cccccc;
    }
    
    .tc-header {
    	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
    	background-color: #cccccc;
    }
    
    body {
    	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-8.png");
    	background-color: #cccccc;
    }
    
    footer#footer .colophon .social-block a {
    	color: #736357;
    }
    
    footer#footer {
    	border-width: 50px 0 0;
    	border-style: solid;
    	-moz-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
    	-webkit-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
    /* Safari 3.1-5 */
    	-o-border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
    /* Opera 11-12.1 */
    	border-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/border-3.png") 300 0 round;
    	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
    	background-color: #cccccc;
    }
    
    .entry-content {
    	margin: auto;
    	width: 75%;
    }
    
    .cleanlogin-container {
    	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-header-4.png");
    }
    
    input[type="submit"] {
    	background-image: url("http://bramcroft.co.uk/wp-content/uploads/2015/03/background-footer.png");
    }
    
    .cleanlogin-container.cleanlogin-full-width {
    	max-width: 450px;
    }
    
    #main-wrapper {
    /* default fallback */
    	background: rgb(255,255,255) transparent;
    /* nice browsers */
    	background: rgba(255,255,255,0.6);
    /* IE 6/7 */
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#99FFFFFF);
    /* IE8 */
    	-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#99FFFFFF);
    	border: 2px solid #736357;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	padding: 5px;
    }
    
    .my-social-menu-search {
    	display: inline-block;
    }
    
    .navbar-inner .social-block {
    	margin: 0;
    }

    The website is here.
    I believe you helped me with the search bar earlier today, now playing up a little with width etc. in the child stylesheet.

    Any insight would be greatly helpful,
    Sean

    WPyogi

    (@wpyogi)

    There might be other problems, but you are missing a closing bracket here:

    button, input[type="button"], input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"], label, select {
        cursor: auto;

    That invalidates all subsequent CSS.

    Try validating your CSS here:

    https://jigsaw.w3.org/css-validator/#validate_by_input

    Well,
    when I wrote that you should active your child theme was ’cause I went on your page, and found the child-theme wasn’t active. But maybe I was wrong..
    Anyway:
    // Style the search input textbox
    this isn’t a valid css comment
    Here you have an unclosed comment:

    .my-social-menu-search .search-field:active,
    .my-social-menu-search .search-field:focus{
     color: #736357;
        /* change the colour above if you are working with a dark navbar background
        }

    This isn’t a valid css comment:
    //make appointment

    plus the error WPyogi kindly suggested above

    😉

    Thread Starter seanmyers

    (@seanmyers)

    That’s a great spot, thank you! Unfortunately it doesn’t fix the issue with the child CSS not working for all aspects. I will take your advice and attempt to validate it, thank you,
    Sean

    Thread Starter seanmyers

    (@seanmyers)

    Between the two of you, you have managed to fix this issue. Thank you so much for all the help and support, it is truly appreciated!

    What have I learned from this? Use validators before asking questions!

    Thank you again,
    Sean

    WPyogi

    (@wpyogi)

    Use validators before asking questions!

    LOL – yeah, we’ve all learned that more than once! You’re welcome too.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CSS prioritisation’ is closed to new replies.