bondimedical Posted October 30, 2015 Share Posted October 30, 2015 How can I change the color of the text in just one of the headings in top-bar (currently #ffffff)? Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 30, 2015 Share Posted October 30, 2015 All the text in the Navigation headings has the CSS selector:.top-bar-section ul li > a {The difference among all of them is the name of the category. So, you need to find the specific name of the one category you want to have a different styling.http://www.w3schools.com/css/css_attribute_selectors.aspIn the file cubecart.default.css, add:.top-bar-section ul li > a[title="Test Category 3"] { color: green; }There is also the color of the text when the mouse cursor is hovering over it:.top-bar-section ul li:hover:not(.has-form) > a[title="Test Category 3"] { color: blue; } Quote Link to comment Share on other sites More sharing options...
bondimedical Posted October 30, 2015 Author Share Posted October 30, 2015 Thank you for your help.I have one other CSS issue. I am using the following code to have responsive YouTube videos..videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }On Foundation however it looks a bit big because the video touches the left and right hand edges of the border. How can I put a space of 30px on the left and right hand sides? Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 31, 2015 Share Posted October 31, 2015 I think your class is actually .video-container (not .videoWrapper, unless you are working on a development installation).The <iframe> seems to have fixed pixel height (315) and width (560) attributes. Once you remove those attributes, test the responsiveness.But it is weird how the iframe gets sized. For the iframe rule, try width: 90% and add margin: 0 2% 0 30px; Quote Link to comment Share on other sites More sharing options...
bondimedical Posted October 31, 2015 Author Share Posted October 31, 2015 I have removed the height and width attributes and changed the iframe rule however some issues came up.The width of 90% is good however the 30px moves it over to the right too much on mobiles. How do I centre instead?Also, black bars have appeared on the top and bottom of the YouTube video? Quote Link to comment Share on other sites More sharing options...
bsmither Posted October 31, 2015 Share Posted October 31, 2015 Try changing the 30px to 5%.I have no advice about the black bars. Does the imagery look to have a normal ratio? Not stretched? Quote Link to comment Share on other sites More sharing options...
bondimedical Posted October 31, 2015 Author Share Posted October 31, 2015 Thanks it appears centered now.The black bars appear because the width is set to 90% but the imagery is fine. They get even bigger if you lower it to say 80%? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.