Speeding up workflows + margins/paddings madness

Tagged: margins, paddings, W3 Total Cache, W3TC, workflow

This topic has 8 replies, 2 voices, and was last updated 8 years, 5 months ago by Sebastian.

Author	Posts

digwr7 October 30, 2015 at 2:51 am	Hey, Sebastian and TO team! I am currently designing a completely custom membership site with MT and I find myself doing a lot of repetitive work. Please, note that I am relatively new to CSS and a couple of the following questions may sound silly for more advanced members… (As a matter of fact, I learned a LOT in very little time just by using MT… quite an awesome way to further understand CSS by doing stuff without actually doing them!) So, here’s what I’m having trouble with: 1- I have 2 menus that show up across multiple pages simultaneously (the main navigation and another in the side bar) and I need to style them differently. So, if I create a selector for higher hierarchical elements within the menu, the styles gets applied to both menus, which is unwanted… Most of the time I find myself having to create a selector from the very specific element I’m targeting (the lowest possible level) which acts only at the page level, which means that all styles will be applied only for that particular page. As I said, both menus are displayed across several pages so having to do it over and over again almost seems like I’m doing something wrong… There must be an easier way to do this, right? Can I reuse previously created selectors somehow? That would speed the process immensely! Even when working on a single page this kind of thing happens, for example, when I had to style manually every single item on the sidebar menu (which was a long “lesson” menu) and multiplying by 4 all the work, as I had to set styles for hover, active and visited menu links… Again, I couldn’t select the whole menu as I’m working with 2 menus and if I do that the styles are applied to both… 2- Another problem I’m having is regarding the side bar menu and, here’s the thing: I’m using Optimize Press and its Page Builder doesn’t have/support a sidebar… only the blog theme does, but I need to create my pages within OP Page Builder to benefit from the many page elements it brings along. So, what I did is I created a membership navigation (which is just a OP element for adding a menu navigation within the content) then applied crazy margins to make it go beyond the wrapper so that I could “attach” it to the far side of the screen (like the sidebar on Twenty Fifteen Theme). Did lots of tweaking, it looked pretty good, but, quite obviously it displayed bizarrely on other screens… that is, if it displayed at all. This was my clumsy fix for what I wanted to do and it (kindda) works on bigger screens but it’s not really a solution. Specially because I don’t feel like setting the precise position of an element by doing crazy margins and/or paddings is the way to go… Seems like a lot could go wrong if any element on the page changes over time. As a matter of fact I took the “side bar” element I created way out of its original row by going hard on margins… (it even felt wrong) From what I’ve been reading I’d say I’d like to stay away from the floating x clearing issues… So, could you help me to achieve this? I guess it’s all done with CSS only, right? 3- I also need the sidebar menu to be sticky and I know this might go beyond your support as even though it can be done through CSS only, mostly I find people using JQuery… If you can point me a direction in order to deal with the “sticky” part of the problem, I’ll be happy! 4- One last thing! (and this one got me quite worried…) None of the styles I create are shown for not logged in users and, as I had a conflict with W3 Total Cache, I’m not even using it while I’m on MT (yes, I did flush all caches to double check). Other than the (disabled) W3TC plugin and Optimize Press, it’s pretty much a fresh WP install… Have no idea why that’s happening as the styles do get saved and shown when I’m logged in. This post was quite long… sorry for that! Would it be better to split up questions through different posts next time? Hope to hear from you anytime soon… Thanks in advance!
digwr7 October 30, 2015 at 3:10 am	Just adding some info to the last question regarding styles not showing for not logged in users: I use Cloudflare! But the SSL is disabled across the entire site… It’s the only thing relevant I forgot to mention I suppose…
digwr7 October 30, 2015 at 4:58 pm	Hey guys, another update, regarding the second question: I just came across a CSS class called “extend” (can be applied left, right, and full). Is this the best way to achieve what I want in question 2?
Sebastian October 30, 2015 at 7:02 pm	Hey! It should be possible to target the menus separately – if they have distinguishing classes or ids. Could you post a link to you site please? Sometimes advanced positioning attempts fail because they defy the norm too much. But if you send me a link to your site I will assess the situation for you. As above. Cloudflare is very likely the cause for non-logged in users not seeing the latest style edits. Can you clear the cloudflare cache via your web host? Cheers! Sebastian
digwr7 October 30, 2015 at 7:08 pm	Hey Sebastian! Thanks for the reply. Try accessing this URL: http://caixapreta.empremaker.com/cped-teste It’s the test page I’m working on. Cloudflare was indeed the issue. I’ve purged all caches from CF dashboard and it now displays my custom styles so you should see them right away. Thanks!
digwr7 October 30, 2015 at 7:11 pm	Additionaly, try resizing the browser so that you can see what happens with the elements…. You’ll see that the only ones that do not display properly are the ones I used crazy margins on…
Sebastian October 31, 2015 at 9:07 am	Thanks for that. This is what I see when I view that page: Could I be seeing something different because my screen is smaller than yours? I’m not sure which two menus you’re referring to (top right and bottom left?). Nothing seems to be in quite the right place, even when viewed at the largest size I can on my monitor. Cheers, Sebastian
digwr7 October 31, 2015 at 9:29 pm	Yeah, everything is messed up on your screen. This is how it looks on mine. (note that the top menu appears many times throughout the screenshot only because I made it sticky and when making the window scroll for the screenshot it captures the menu multiple times as it scrolls along with the page) Can’t you see the menus there? The “top right” has: “Home, Tour, Perfil” in it. The one on the left is a red box with a title: “Navegação do Módulo” It’s right there on the image you sent too… Why is it getting so messed up on your screen? This is one of the things that I’m most concerned about… Note when you said: *“Nothing seems to be in quite the right place,”* That’s precisely my point. Seems like all styles I apply only look the way they should on my screen. If it doesn’t work across all screens or, at the very least, all desktop screens, what’s the point?
Sebastian November 1, 2015 at 1:38 pm	Hey, Did you change any more Cloudflare settings since your last post? Because now I see things as you do: So on to the original problems you were having: 1. Styling the menus differently The top right menu has an id of #navigation-alongside. So if you put that at the beginning of any of your selectors that target both menus, it will reduce the selector scope to just one menu. So if you had: `li.menu-item` You would change it to: `#navigation-alongside li.menu-item` You just put #navigation-alongside at the beginning of any menu selector, and ensure there is a space in between. You can adjust an existing selector’s code by clicking it’s name in the top toolbar. Or, you can modify the suggested code in the selector wizard with this #navigation-alongside prefix before clicking the CREATE SELECTOR button. The bottom left menu has a class of .navigation-sidebar-10, so you can use that prefix when you only want to target that menu. 2. Crazy margins Most of the problems you’re encountering with your layout are due to a fixed-width 960px wrapper element that contains all other elements. This is why you’re having to pull elements out of their normal place with negative margins. Could you change this 960px grid system via Optimize Press so that content fills the with of the page? Having a fixed width layout that changes to smaller fixed width at smaller screen sizes isn’t the best approach in my opinion. I recommend only setting fixed pixel values for max-width. So that key structural elements shrink down fluidly on smaller screen sizes (the width value should be auto or a percentage e.g. 100%). Responsive web design is a big topic. To big for a forum post explanation. But I’m writing a tutorial on designing responsively with Microthemer and have almost finished the first draft. If you’d like to get notified when it’s ready please sign up to our newsletter. 3. Sticky sidebar You might be able to position the left menu in on place by setting the position property to fixed, without necessarily resorting to JavaScript. 4. Caching I’m glad you managed to flush your Cloudflare cache and resolve this one yourself. I hope that helps! Cheers, Sebastian