Live link here
http://soloveich.com/pr6/
Got a couple of h2's on the site. Need the image captions on main page have different styling. Gave them a different class and styled it. Doesn't work. What did i do wrong?
Used image widget and gave class in admin panel. Looking at the source code- it got the class.
css i used
h2.mainpagelist {
margin-top: -35px;
margin-left: 25px;
font-family: tahoma;
font-size: 13px !important;
color: #414040;
}
Related
I'm trying to create a button. I've added this to the child's style.css (child of twentytwelve)
.mybutton {
background-color: #F7931E; /* orange */
border: none;
border-radius: 3px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 10px;
}
and this within a custom html widget in a sidebar
<a class="mybutton" href="blahblahblah">Online Community</a>
but when I view the page, the link shows just as text, not a button.
I can see via DevTools (in Chrome) that the child style sheet IS being loaded and its classes ARE being applied to other elements, but it's just not applying the button one!! The class doesn't show up at all.
If I add a new style rule for the mybutton class in DevTools, and copy and paste the css from above, the button shows up correctly, so it's not an error in the css itself.
I've tried deactivating all the other plugins, as a google search indicated that could be a cause, but that didn't help.
Any ideas on how to further debug this????
Thanks!!
Julie
I have seen conflicting information about how to use a master style sheet and have experienced some bugs when testing methods. Just want to get clarification on the proper way to do this.
I would like to store cross website branding styles in a master global.css sheet and make page specific adjustments on a second .css file.
For example, this code would live on the master sheet:
#headline1{
font-family: 'Roboto', sans-serif;
font-size: 96px;
letter-spacing: -1.5px;
}
and this code would be page specific:
.headline {
color: #FFFFFF;
text-align: center;
}
I have recently read something that said you should not use ID in this manner. I've also run into issues when using it multiple times in the same grouping. I initially tried doing this using just classes instead of the ID, but it never worked. Not sure why.
Is this method considered proper? If not what is the proper way to do this?
If you create a master.css with:
.headline {
font-family: 'Roboto', sans-serif;
font-size: 96px;
color:#000
letter-spacing: -1.5px;
}
You can build upon/replace it per page as long as your custom css comes after the master.css
.headline {
font-size: 45px;
color: #FFFFFF;
text-align: center;
}
Quick example of a page:
<link rel="stylesheet" type="text/css" href="master.css"/>
<style>
.headline { //
font-size: 120px; // size overides master
color: #FF0000; // color overides master
text-align: right; // added alignment, which is overiding the browsers base css
}
</style>
I'm not sure if this is quite what you are looking for, but I hope it helps
In the example you provided a can only assume you have something along the lines of:
<div id="headline1"><span class="headline">Title</span></div>
This would basically mean any style applied to the div, the span would inherit unless told otherwise.
To further expand on this, you can also use inline styles <span style="color:#FFF"> which will dominate any other styling UNLESS an !important; has been added to a style element.
I am trying to modify a woocommerce website and I have very little HTML/CSS training. Most of what I've learned has come from trial and error, some online tutorials, playing around with the developer console in Chrome, etc....
I'm trying to add an image border to the top of a page header right before an area called tg-container. I was able to put one below it, using an existing class, whose info I didn't need to see. Can it be done with the Additional CSS interface built into the theme or do I have to go into the style.css and html to create the boarder? I know the benefit of the Additional CSS interface is having no need to edit the theme files directly whenever the theme is updated.
Bypass Page
Example Page with border - accessible only after bypass page is visited
IMAGE: Example page with Chrome Developer Console open and showing code for area
-------------------- Further Experimentation-------------------------
I created a child theme and am trying to add it that way, but I am missing something (because I'm not a coder), I was able to create the area for the image, but the image isn't showing up. I've tried adding it in the child theme and in the parent theme (editing style.css and page.php).
In the page.php of the child (and the parent) (after the following)
<div class="page-header clearfix">
<div class="tg-container">
I added
<h3 class="title-border"> </h3>
I've tried this in the style.css of the child:
/*Add Wycinanki Borders*/
.title-border {
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
font-weight: 600;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
margin: 5px 0;
}
I've tried this in the style.css of the child:
/*Add Wycinanki Borders*/
.page-header .title-border {
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
font-weight: 600;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
margin: 5px 0;
}
I've tried this in the style.css of the parent:
.page-header .title-border {
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
font-weight: 600;
color: #3b3b3b;
font-size: 14px;
line-height: 30px;
margin: 5px 0; }
Again, it has created the space for the image, but the image isn't showing up. I copied the other attributes from the "entry-sub-title", where I was able to put the image successfully, thinking that they would be styled the same way.
Thanks for any insight and helping me learn what I'm doing, hahaha.
Ok, I got it figured out. I added <div class="title-border-top"> </div> above the page title (and actually added <div class="title-border-bottom"> </div> below for future modification.
I then added the following in the Additional CSS:
.page-header .title-border-top{
background-image: url("https://store.dolina.org/wp-content/uploads/2020/08/wall-murals-floral-polish-folk-art-pattern-in-square-wycinanki.jpg-e1596302126833.jpg");
background-repeat: repeat-x;
height: 30px;
margin: 10px;
}
It is working and I hide the entry-sub-title I had taken over for the border to begin with. Now I have to figure out which page templates WP is pulling for all the main pages, so I can add the html to them.
I am trying to figure out how to change the font size of the navigation bar on my company's website: http://bicycle.ns.ca/
I've tried to edit the CSS through the theme that is currently installed but no changes occur still.
I also dived into the themes style.css file and tried various things like:
a {
font-size: 25px;
}
to no avail. Can someone point me in the right direction?
you need to edit properties of top menu tag.. try this!
.top-menu a
{
color: #6b6b6b;
font-size: 25px; <!–– Try Editing Here ––>
line-height: 12px;
display: block;
}
You can change the font site of the menu items in menu by adding the following CSS property for menu links
.top-menu a{
font-size: 12px !important;
}
I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter