Help me with a CSS issue

  • Hi guys,

    I am pretty new to wordpress but get to it more and more. I want to change some apperances on my contact page but dont understand the style sheets. I first installed my theme and after the theme i installed the child theme for editting but my edits wont work. For example i wanted to change the background color of my contact page but it wont work. Also if i go with my inspector to the code it says its on line 26 in the style.css but there is nothing my style.css file only this:

    /*
    Theme Name: Champion
    Theme URI: https://champion.stylemix.net/
    Author: StylemixThemes
    Author URI: https://stylemixthemes.com/
    Description: Champion was created especially for sport clubs, football clubs, soccer news and sport organizations. The responsive layout is designed based on the Bootstrap 3.1 standards. Champion was built on Visual Composer Page Builder, which is included into the theme. Using Visual Composer you can easily create the pages in Front- or Back-end with 60+ modules.
    Version: 1.2
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    Tags: champion, responsive, sport, soccer, football, sport club, club, wordpress, wp, fixtures, events, match
    Text Domain: champion

    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you’ve learned with others.
    */

    @import “assets/css/normalize.css”;
    @import “assets/css/bootstrap.min.css”;
    @import “assets/css/style.css”;
    @import “assets/css/font-awesome.min.css”;
    @import “assets/css/select2.css”;
    @import “assets/css/jquery.fancybox.css”;
    @import “assets/css/owl.carousel.css”;
    @import “inc/customizer/customizer.css”;
    @import “inc/vc/assets/css/vc_next_match.css”;
    @import “inc/vc/assets/css/vc_upcoming_fixtures.css”;

    So put the following code underneed it:
    .page-id-86 .wrapper {
    background-color: #ffffff !important;
    }

    But it doesn’t change everything i want to change doenst work in the stylesheets. my childthemes style.css is looking like this:

    /*
    Theme Name: Champion – Child Theme
    Theme URI: https://champion.stylemix.net/
    Author: StylemixThemes
    Author URI: https://stylemixthemes.com/
    Description: Champion was created especially for sport clubs, football clubs, soccer news and sport organizations. The responsive layout is designed based on the Bootstrap 3.1 standards. Champion was built on Visual Composer Page Builder, which is included into the theme. Using Visual Composer you can easily create the pages in Front- or Back-end with 60+ modules.
    Version: 1.1
    License: GNU General Public License v2 or later
    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    Tags: champion, responsive, sport, soccer, football, sport club, club, wordpress, wp, fixtures, events, match
    Text Domain: champion-child
    Template: champion

    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you’ve learned with others.
    */

    /* Add your own styles here */

    Also putted the same code underneed the add your own styles but still not working. I want to change the appereance of the next page and also the widget colors etc:

    https://voetbalschool-hilterman.nl/?page_id=86

    Thanx already, with a bit of help i can adjust all the things i want!

    Thanx Guys

Viewing 9 replies - 1 through 9 (of 9 total)

  • .page-id-86 #wrapper {
    background-color: #ffffff;
    }

    Thread Starter sportfeed

    (@sportfeed)

    Thanx Bro! One more question, if i want to edit a widget on one certain page do i nee to put the page id first again!

    Hero of the day ??

    That would be how I would approach it.

    In the example above, that CSS rule would target the element with an ID of wrapper that is contained in an element with a class of page-id-86. Without the .page-id-86 selector it would target every instance in the site of an element with an ID of wrapper.

    Thread Starter sportfeed

    (@sportfeed)

    So can you maybe let me see how for example i change the border and the background color of the contact form widget, so i know how to approach it? When i know that i dont ask anything else more ! But i can go diving into it myself

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try using a browser developer tool to explore the CSS you should use https://developer.chrome.com/devtools#dom-and-styles

    sportfeed,

    in order to target the forms specifically on that page, as @martcol said above, use the page-id to make it not happen on every page. On teh CSS below you can see that I have changed the background colour of the two forms on that page, the background colour matches the bigger form below’s colour but this can obivoulsy be changed.

    Ive also added CSS to change the colour of the labels and the colour of the button text as you coulnt see it before:

    .post-86 #item-vfb-1, .post-86 #item-vfb-2 {
  background-color: #394046;
  border-color: ##394046;
}

.post-86 #item-vfb-1 label, .post-86 #item-vfb-2 label {
  color: #ffffff;
}

.post-86 #item-vfb-2 .vfb-submit {
  color: #313131 !important;
}
    Thread Starter sportfeed

    (@sportfeed)

    Many and Many thanx guys! I now understand this ??

    Thread Starter sportfeed

    (@sportfeed)

    sorry but one last question, on my main page you see if i put a new column on the page with visual composer 2 small bars next to the post carousel on the side so its not full widht of the page:

    https://voetbalschool-hilterman.nl/

    If i do this with the margins the content also moves out of the box so thats no option. do u know a solution for this?

    Thanx heroer

    Thread Starter sportfeed

    (@sportfeed)

    If i want to change te texcolor of the form Contactformulier at the top to black do i also need to mention the class and add font-color? on the contactform?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Help me with a CSS issue’ is closed to new replies.