Vibrant Skeleton

Basic support is open to all members of Volatyl Themes but what about those who need a little more? That's what Volatyl Themes subscriptions are for. The Priority Support subscription gets you more detailed, personal support while the Advanced Development subscription not only includes Priority Support, but also grants you access to premium content only seen by subscribers. This premium content will help you take your Volatyl websites to the next level with advanced development techniques, integration tips, and more information on how to really put Volatyl to use. Check out the subscriptions!

This topic is: resolved

This topic contains 18 replies, has 2 voices, and was last updated by  sdavis2702 4 years, 8 months ago.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #3884

    Richard O’Brien
    Participant

    What exactly is the difference between ‘Edit CSS’ and the Editor > Styles.css?

    Are the Edit CSS changes overiding the sytles.css of the child theme which then overide the Volatyl css?

    #3902

    sdavis2702
    Keymaster
    Post count: 72

    Hey, Rich.

    Where do you have “Edit CSS”? That’s not part of the WordPress core. Could you be referencing the Jetpack CSS feature? I think that’s the case. If so, there is no real difference.

    The way CSS works is that it can be tied to your HTML content in multiple ways. It can be inline placed directly in your HTML. It can be linked in the head of your document to a remote file. It can be pasted directly into the head of your document.

    No matter what, though, as long as it is tied to your HTML, it all follows the rules of CSS. So what you place in Edit CSS has to compete with what you place in WordPress style editor. If what’s in the style editor is stronger than Edit CSS, the style editor CSS wins. The reverse is true as well.

    So what it really comes down to is how you want to organize your CSS. Placing CSS in the style editor ties your CSS directly to the theme you are modifying. Placing it in the Edit CSS for Jetpack will stay with your site no matter which theme you’re running as long as you have that module activated in Jetpack. That’s not bad at all if you don’t switch themes. If you do, though, you’ll end up with useless CSS that the browser has to run but serves no purpose.

    #3901

    sdavis2702
    Keymaster
    Post count: 72

    Also, if you have the same exact CSS in the style editor as you do in the Edit CSS panel, the Edit CSS panel’s CSS will have the final word as it is always ran after the theme’s CSS files.

    #3900

    Richard O’Brien
    Participant

    My bad….JetPack 🙂

    So, I’m free to make changes to the Vibrant css?

    .site-title a {
    color: #9E373E;
    text-decoration: none;
    }

    Doesn’t seem to do anything? Yet editing in Dev Tools makes the change

    #3899

    Richard O’Brien
    Participant

    as a matter of interest I recently added my site to CloudFlare to test this whole CDN lark.

    I mention this because I noticed my FTP client needed tweaking to allow backend access.

    Whether that matters or not…?

    #3898

    Richard O’Brien
    Participant

    OK, so it is CloudFlare that needs to be purged before changes take place…

    I’ll tinker away with Vibrant

    Thanks for answering my original query

    #3897

    sdavis2702
    Keymaster
    Post count: 72

    Sorry for the delay! That is exactly right… your CDN needs to be purged.

    CloudFlare has a feature that allows you to switch on a development mode and it’s only open for a certain amount of time. When you have it on, your cache will clear and changes will take effect immediately. Once development mode is off again, yes, you’ll have to clear your cache/purge your CDN after making changes.

    #3896

    Richard O’Brien
    Participant

    No worries I am learning as I go….though I read your latest blog post on letting pros take control so I hope you’re not rolling your eyes too much.

    #3895

    sdavis2702
    Keymaster
    Post count: 72

    Oh no not at all. You didn’t buy a ready made theme that was supposed to be an end product and try to turn it into a shortcut for creating your own custom design. You’re doing exactly what you’re supposed to be doing here. Remember the “Yay, Google” parts? That’s what this is. Learning what is what and how to do it. You’re learning the exact way that I learned. I was talking specifically about the people who are supposed to be satisfied with the design they bought, but they want to find a way to cheat the system.

    #3894

    Richard O’Brien
    Participant

    Thanks Sean. I just don’t want to come across as if I expect you to style the skeleton because I currently can’t.

    I’m having fun tinkering and learning as I go and this is so much easier than what I previously had installed.

    I’ll struggle away like a small farmer.

    There is one thing that is driving me nuts. On your Volatyl site the site title has a applied to color an element of the text. For the life of me I can’t figure out how to apply that in WordPress.

    I understand that the HTML has

    somehthingelse

    and there is a class span that is colouring the element but where I struggle is how you actually got the h1 to have inserted in the first place.

    But, I’ll figure it out if it kills me. Half the fun.

    #3893

    sdavis2702
    Keymaster
    Post count: 72

    That’s a great question!

    What I actually did was disable my site title in the Volatyl options and built my own header inside of the vol_header_top hook. The reason I did it this way is because, like you’ve noticed, you can’t put HTML in your site title field for WordPress. That’s what makes hooks so awesome.

    Here’s the code I used. It’s PHP and should be pasted into your child theme’s functions.php file. I wrote up a description in the PHP itself that explains the code. Let me know if it makes sense.

    P.S. You’re learning the right stuff.

    #3892

    Richard O’Brien
    Participant

    You’re a legend….

    things just got a lot more vibrant

    #3891

    sdavis2702
    Keymaster
    Post count: 72

    Haha I’m glad it’s working for you. The WordPress interface for Volatyl is nice and very flexible but once you get into writing PHP, things get real and the true power of frameworks is revealed. Don’t hesitate to ask more questions!

    #3890

    Richard O’Brien
    Participant

    That PHP code breaks the menu responsiveness?

    Here’s the css I added to the skeleton….

    .site-title a {color: #9E373E;}
    .menu a {color: #9E373E;}
    a, .site-title a, .menu a:hover, #content .entry-header a:hover {color: #C45A3B;}
    #main-content, #main-content #content {background: #2B2E36; color: #9f9f9f;}
    .site-title span {
    color: #9f9f9f;
    transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    }
    .site-title span:hover {
    text-shadow: 0 0 4px #fff;
    }

    It’s all still inventing but I thought I’d share in case this has broken my menu?

    #3889

    sdavis2702
    Keymaster
    Post count: 72

    Is your site live, Rich? If so, can I have a link? I need to see exactly what is broken about the menu responsiveness.

    Are you on the most updated version of Volatyl, 1.1.6? If you just upgraded, have you seen the new responsive CSS options? Shoot me some more info and I’ll get the issue taken care of.

    Thanks.

    P.S. You can forever go back to Volatyl Themes and download the latest version of the skeleton that has already been checked to ensure capability. As stated in the comments of the skeleton CSS file, you’ll want to grab the latest version of the skeleton before every time you do a new job with it. So if it’s been a while since you’ve touched it, you may have missed some major updates.

    Let me know.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.