Accessing @Media Query's to edit BREAKPOINTS in rapidweaver CSS


(Jimmy Chainey) #1

Hi Everyone,

I would like to edit the parameters of the ‘breakpoints’ on the nav bar of my site and my research suggest that this will mean editing the @media enquires part of the CSS code?

Please can someone inform me how I would find that in rapid weaver?!

@Oscar @turtle @kryten

EDIT: I should mention I am using the SPLIT theme


(Stuart) #2

NHi @JimmyChainey

Most themes use CSS media queries to ascertain the viewport of the device to which the page is being served up and to modify the presentation of the content to provide the best viewing experience for that screen. Insofar as the designer has made that possible.

I have to say that a fundamental grasp of CSS and at least an understanding of responsive design is going to be necessary pretty much from the start. Not trying to put you off, I’m just saying that its very easy to make things much worse very quickly, so always work on a copy of your theme and take care.

An introduction to media queries is available here:-
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

So how to work with Media Queries in RW themes? Well, there are options, but they all involve writing the queries (and the CSS modifications required for when that media query returns true) then somehow having those queries and CSS applied to your project. So that brings us to, simply, how to use your own CSS in a project. Some suggestions:-

  • Add your own CSS file. Easy, just add a line to your HEAD section referencing it. Done.

  • Add the CSS to the RW Code->CSS container

  • Lastly (and I really do hesitate to mention it as its so fraught with problems and risks), modify the CSS in your COPIED theme files. There, I said it. … but don’t do that one… as its tantamount to a ticking bomb which can explode in your face when you want to update the theme or whatever other situation you encounter later. So forget I even said that :wink:

But, having said that… you might want to at least LOOK at some of the CSS media queries in your theme. As long as you are careful and don’t break it, it can’t hurt to at least have a peek. So in your theme drawer, remember to duplicate the theme then you should be able to choose “Show Contents”. The themes container folder inside RW should open then you can try to find the main CSS files. Normally its a file called ‘styles.css’. With Split you will see that in the folder that opens. Get a decent text editor too - it’ll make your life SO much easier! As you look through the CSS file you will soon see the media queries and after a while they should start to make sense.

A word of warning… There may not be as much structure as you would like here… there could be multiple media queries for the same viewport but impacting different elements, there could be queries which overlap in terms of the viewport they execute on… the queries could be anywhere… there may well be other CSS files which also contain media queries… It varies from theme to theme, developer to developer.

Very quickly you are likely to see just why theme designers/developers deserve our respect and why their product is worth every penny of the asking price. Modern RW themes are extremely sophisticated, nuanced and carefully designed to deliver optimum render across a plethora of devices. That is not accomplished by magic, it was engineered into the theme deliberately and laboriously. Yes - frameworks help a lot here too :wink:

Have a looksee. Do your homework. Only mess with copies of things that don’t matter if they break. And experiment and TRY things. Its the best way to learn.

Best of luck.


(Jimmy Chainey) #3

Hey @kryten,

Thanks so much for this… it’s a very detailed reply!

so is there no easy way to edit the breakpoint on the theme? I’ve found the media query I want to change - instead of the nav bar dropping into the mobile version of the nav bar at 768px, I want it to drop into the mobile nav at 1170px.

here is the code, I can’t find the style.css file to change it…

@media only screen and (min-width: 768px) {
.header {
height: 70px;
}

how can I code in that change or find the file - where is the ‘theme drawer’?


(Stuart) #4

@JimmyChainey

In RW you should (by default, I think) have a button on your toolbar named ‘themes’, click that. Or from the main level menu choose VIEW->SHOW THEMES. The theme drawer should then open. Before you try to do anything else I suggest you find Split and duplicate it, then don’t touch the Split theme, use the duplicate.

If you ‘show contents’ on your duped theme you should be able to spot the styles.css.

But … you can always just drop CSS into the RW CSS code container and it should override the theme.
Try that… but I don’t think your CSS is going to do quite what you think it will.

You can always submit a request for yuzoolthemes professional services/customisation work here:-
http://www.yuzoolthemes.com/custom/

You might want to give that some consideration if your need justifies it.