Home Forums Product Support Novella Interaction with bootstrap.min.css

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #4729
    UConn MAGIC
    Participant

    Hello – I am trying to add a few custom elements to my page using Bootstrap. I am just referencing the CDNs for boostrap.min.css and boostrap.min.js. The js file appears to be fine, but as soon as I make the reference to the CSS file, many of the Novella theme properties change. Notably, this includes the background color of the post as well as the font size and style for the both the content of the post and the title.

    I am somewhat new to WordPress but am wondering what is causing this interaction and is there any way to get around it? I’d love to be able to include some Bootstrap elements on my page without having to sacrifice some of the nice elements of the Novella theme.

    Thanks for any help.

    #4755
    Jenny @ Aesop
    Keymaster

    Hi there UConn. I think I mentioned this to you in another post but I’ll add it here as well.

    You should always put custom CSS in an external plugin. When an Aesop theme is updated, any CSS you add/edit in the core files will be erased, and we certainly don’t want that! 😉 Please use a plugin such as Simple Custom CSS (https://wordpress.org/plugins/simple-custom-css/) and add your custom CSS there instead.

    Also, when writing PHP code to use with a theme, I recommend using a plugin like Code Snippets to save your PHP (https://wordpress.org/plugins/code-snippets/). Using this plugin, your PHP code will be safe and will not be overwritten with Aesop updates.

    Hope that helps!

    #4773
    UConn MAGIC
    Participant

    Hi Jenny, thanks for your response. Thanks for the useful custom CSS references, but I am not sure that that answers my question. The issue is that Bootstrap (and jQuery UI) both provide additional elements like buttons, tabbed divs, collapsible accordions, and other fun things that look pretty when you include them in your website. However, to do so, you need to reference the CDN so that it all works – for example:

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    at the top of the page. That way you can reference all the elements like buttons, etc. and the way they should look.

    Referencing the .js file is fine, but the minute I reference the CSS file it mostly overrides the Novella CSS for the font type, font size, and background color of the page or post (but only these elements). I don’t think that this is a custom CSS issue but more of an issue of the Bootstrap CSS that is referenced overriding the Novella CSS somehow.

    Do you have any suggestions as to why this might be happening? Or how I could resolve the issue so that I am still using both the Bootstrap CSS and Novella CSS together so that I can utilize the elements of Bootstrap like buttons, etc. while maintaining the font type and other elements of Novella?

    Thanks!

    #4842
    Jenny @ Aesop
    Keymaster

    If Bootstrap is overwriting the Novella CSS, then what you’ll probably need to do (kinda guessing here) is to use the custom CSS plugin, copy the styles over from Novella that are being overwritten and paste them in the CSS plugin. The CSS plugin should overwrite the Bootstrap CSS.

    I recommend testing with a single CSS style first so that way you aren’t doing a bunch of work for nothing. Also, I advise putting the word body in front of your custom CSS like body .novella-header {color: #FFF;} to be sure your CSS is specific enough to overwrite the Bootstrap styles.

    Hope that helps!

    #4941
    UConn MAGIC
    Participant

    Jenny – thanks for the info!

    I have used the custom CSS plugin and put in the needed styles, however for some reason, even this local custom CSS does not override the reference to an external CSS. My code below:

    body {
        font-family: "Libre Baskerville",serif;
        line-height: 1.8;
        color: #3E3E3E;
        font-weight: 400;
    }
    
    html {
        font-size: 1.125em;
    }

    There are other issues, like the background color, but I figured I’d start with the font first. I am new to CSS so not sure if this is right or not.

    The only thing I actually got to work is doing the style manually in each post using the <style> tags and putting that particular bit of CSS between them. But adding it to the Custom CSS does not work for some reason.

    Shouldn’t the style.css sheet just automatically override any external references anyway?

    Do you have any other advice, this is kind of frustrating! Thanks.

    #4953
    Jenny @ Aesop
    Keymaster

    Hi UConn! Once you understand how the inspector in Chrome works, it’ll make things a lot easier. If you’re not familiar with how to use CSS inspector in Chrome, it’s super easy to use and will make finding the css classes that you’ll need when you want to change the design. Here’s a great in-depth article about this: https://www.html5rocks.com/en/tutorials/developertools/part1/

    In your example above, just using body isn’t specific enough and is too general, but using the same code and adding .single to it works fine. (FYI .single targets single posts, not pages, the blog page, etc. They all have their own class name). This CSS works fine:

    
    body .single {
        font-family: "Libre Baskerville",serif;
        line-height: 1.8;
        color: #3E3E3E;
        font-weight: 400;
    }
    

    Here is a screenshot of what you should look for in the inspector. https://www.screencast.com/t/CngVgkTUx Just change out .single for whatever you are trying to target, test your changes, and hope for the best. 🙂

    #5038
    Jenny @ Aesop
    Keymaster

    Hi there! Please let me know if you still need help with this topic otherwise I’ll close it in a few days. Thanks!

    #5150
    Michael Beil
    Keymaster

    Hey UConn,

    Is there any way we can further help you?

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.