I am trying to edit a drop down menu which I defined recently in function.php file in WordPress.
So I want to show two menu in header of WordPress like this :
So I want to increase the width of menu and want to make this like this :
So if I am trying to put code in a div and trying to increase width of div then the whole thing is increasing and if I am trying to inspect element then its showing this :
element.style {
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button, select {
text-transform: none;
}
So how I can modify element.style when its not define anywhere in stylesheet.
I have added width to the global select element of theme style sheet.
select{padding: 6px 8px; border-radius: 0; outline: 0;width:209px}
You can increase css priority by nested class.
Demo:-
<span><p>hair</p></span>
CSS:-
p{color:red;}
span p{color :blue;}
The above demo will display blue colour text.
Element style define in main source code, like this:
<select class="btn fixed" style="width:250px"></select>
You should overwrite some code to CSS file.
.btn.fixed[style] {width: 800px !important;}
Like when style a 'placeholder' attribute in 'input' element.
Related
I would like a DIV's background-color to change when I hover over it. I can get it to work if I don't set the background-color in the DIV's style property but I don't understand why this stops the hover colour from being applied?
<style>
.hovery {
cursor: pointer;
display: block;
float: left;
margin-bottom: 4px;
margin-right: 10px;
border: 1px solid gray;
border-radius: 6px;
}
.hovery:hover {
background-color: black;
}
</style>
When I create my DIV (in PHP) I'm using the code below and I'm setting the background-color property at the time of creation so that I can set the 'selected' one to a different colour than all the other DIVs:
echo "<div class='hovery' style='background-color: " . ($onthis==$shrow['Name'] ? $_SESSION['branding_buttonColour'] : "#EEEEFF;"). " '>\r\n";
I've discovered that if I don't set the background-color in the code above then the hover colour-change works, but why does setting the background-color prevent the hover colour from working? Aren't they two different things?
This is called specificity and you are giving the whole strength to the inline styling. Avoid it or make javascript tricks (like on hover adding a classname). You can make too this:
.hovery:hover {
background-color: black !important;
}
But I don't like it so much. If the inline styles are mandatory for your requirements, use !important. Otherwise, remove the inline styles.
You're best off adding a class to the element within PHP, then controlling the background-color of that class with CSS.
The added benefits of this is keeping your code clean, avoiding use of inline styles (which over-rides every rule) and you can easily change the class via Javascript which in turn changes the color.
Hi I've been trying to create a smart button menu set in an drupal block that remembers which button has been clicked (which site it is on). For reasons that don't matter, it is not a menu it's an in-block item. I created the following in-line:
<div>Overview</div>
<div>Instruments</div>
<div>Travel</div>
This coupled with the following css produces lovely buttons:
.button {
background-color: #61210b;
color: white;
float:left;
padding: 2px;
border: 2px solid #000000;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'verdana';
margin-bottom: 10px;}
.button:hover {
background-color: green;
color: white;}
.button:focus {
background-color: green;
color: white;}
.button:active {
background-color: green;
color: white;}
So everything above works great. However, the green activation color does NOT stay. As soon as I go click it goes back to what it was before. I want it to 'show' the page it is on with it's color change and only the currently chosen button will have the green color. What I have not works great except for that little issue. I've read around on the site a bit and here are some things that do not work:
--> inline php, creates errors link unreadable, if I define a class as selected with a different color, this does NOT work:
Overview
What also does not work is defining an additional class in the <a href > or <div> to make it 'selected', at best if I use the css file and do
.selected a { color: green; }
#selected a { color: green: }
I can permanently change the color to green, which is not what I want at all. I saw the discussion previously of using lists <li id="selected"> to create menues but not only does this not give me very nice buttons like my div format does, it also flat out does not work. See: CSS: How to change colour of active navigation page menu
The color just changes permanently, I only want it to change color if page=page of link. Since I'm using div this means I also cannot use the other pseudo-class-selector tricks like :target or :root. I have a feeling php is the way to go but I don't know why it can't be read in-line from my drupal box item. It has no problems with html or css in-line. Any ideas?
Try this code
CSS
.button:active, .button.selected {
background-color: green;
color: white;
}
PHP
Overview
what you wrote is calling for something else...
.selected a is targeting any element with the class "selected" which is inside an anchor tag, what you mean is an anchor tag which has the class selected = a.selected
ok, so I heard back from our system administrator and Drupal safety settings do not allow for in-line php or java scripting. There is literally no way to do this with div statements. The only way is to delete everything and make a new block of type menu block. In a menu block the psuedo-class :active will stay active if you use css
li .active
otherwise you can try to get php enabled but most drupal areas do not allow that or java scripting (at least it's not allowed where I am).
I've been trying to figure this problem out, but no luck. There's probably a simple solution that I'm missing. I'm working on a Home Page template that has 4 featured products. The featured products end up showing diagonally and the images also overlap the title, price, and add to cart buttons. If anyone can help, that would be great!
Here's a link to the page that the template is on: http://playground.krisyoungboss.com/home/
(Going to change the front page displays later)
And also here is the shop page link if anyone needs to compare: http://playground.krisyoungboss.com/shop/
Thanks❤️
You've got a collection of things going on.
First, the reason the things are showing diagonal is because you have a <pre> element in your code. I suspect you may have copy-pasted a shortcode, and in doing so picked up the <pre> they had wrapped the shortcode with.
So, first things first, edit that page in the WP dashboard, and change to the text view (tab in the top-right corner of the editor area). Look for this:
<pre class="brush: php; gutter: false">
Find it, and remove it (don't forget to remove the closing </pre> tag also).
Then, the reason your images are covering up the content below is because of this declaration in your stylesheet (on line 228 of your stylesheet):
img.wp-post-image {
border: 5px solid #000000;
border-radius: 5px;
float: left;
height: 300px;
margin-bottom: 15px;
margin-right: 10px;
width: 300px;
}
The float:left is applying to the images in your featured section, which is causing the problem. Additionally, the height / width are not good (although they are being overridden by other styles).
Remove float:left, or else add a style like so (after the above styles in your stylesheet):
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
float: none;
}
Finally, your add-to-cart button is too wide. You need to address the styles for it, also - it's spilling out of the parent li elements.
Im trying to implement a more accurate h tag structure on my opencart site for seo purposes. For those that are unfamiliar with the html in opencart, most pages are split with php calls being made to seperate header, main body and footer files. I want to have a h1 tag that is slightly different on the main page to the product page by writing internal css to change the font size to something slightly smaller.
I therefore added the code (below) to the top of the products page which seems to work but leaves a massive white space at the bottom of the page below the footer. Example at this link: http://www.imbued.co.uk/sleep/aborro-bed
How do i implement this using css correctly?
<style>
h1 {
font-size:2em !important;
margin:0 0 20px !important
}
</style>
Try this:
"h1" on main page:
#content-home h1 {
font-size: 2em;
color: red;
}
"h1" on product page:
.product-info h1 {
font-size: 1em;
color: green;
}
Hello I have a header that I am trying to get working and I just got the menu working correctly, but now I can't get the size working properly.
The header is located at www.g-evo.com/header.php and what I want to do is shrink the grey a little bit so its more flush with the logo. I still want to keep those coloured boxes in the white however.
The CSS looks as such:
<style type="text/css">
#header-container {
/* centering for IE */
text-align: center;
}
#menu {
width: 950px;
/* centering for other browsers */
margin: auto;
}
#logo {
width: 950px;
/* undo text-align on container */
text-align: left;
/* centering for other browsers */
margin: auto;
border-style:hidden;
border-width: thick;
}
body {
width: 950px;
/* undo text-align on container */
text-align: center;
/* centering for other browsers */
margin: auto;
}
#headercolor {
background-color:#EEEEEE;
}
</style>
Thank you
I believe this is actually a matter of your HTML markup, rather than your CSS. You have two #logo divs (as a side note, you should only use each ID once per page), the second of which is causing the extra gray space you are referring to.
You should put /header_media/GTextured.png and /header_media/shapeimage.png in the same div, and align them next to one another, which should solve your problem.
For starters, you're using the "logo" id on two different items on the same page... that's not correct, since the ID attribute should be unique per element.
On the other hand, I don't really understand what you want, but if it's just to get the menu a bit closer to the logo, I'd add a class or change the id for the second div with the logo ID and set it a height of 20px, or so..