Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm totally Noob and New with programming. I know few thing like where to find CSS, rewriting PhP and stuff like that but it's very limited.
So actually, there is my question :
On my website (Woocommerce on Wordpress), I've got a drop down menu. When you reach the Home page, the drop down work perfectly.
But if you click on one the menu items like "Fleting and Spinning" section, you will see that you can't choose any of the items in the drop down menu because this one will disappear before the mouse cursor can get on to it.
Did someone know where and which CSS (I guess it's gonna be a class or something like that) do I have to modified to get things right ?
WEBSITE : Wordpress Website
Hope I'm at the right place to seek for an answer ^^
Take care...
on lines 3842 - 3846 of /wordpress/wp-content/themes/theretailer/style.css
Change :
.category_header
{
padding: 63px 0;
margin-top: -70px;
}
To :
.category_header
{
padding: 0 0 63px 0 ;
margin-top: -7px;
}
IMPORTANT If this is not a theme you created, you should not make changes directly to it. You should instead create a child theme and make the changes there.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I am using the Discy Wordpress theme.
What css code could I use to hide the share button and author's name from the post loop only.
Here is a screenshot of what I would like to hide
I'd recommend inspecting the elements you want to hide in your browser and add display: none to the class/id on those elements.
Ex. Say I want to hide the 'Your Answer' text here.
I would then add some CSS
h2.space {
display:none;
}
Edit:
Based on your needs there are a couple options:
Edit the templates used by Wordpress to exclude these elements on the necessary pages.
or
Insert some jQuery that will hide the elements on a specific page.
$(document).ready(function() {
if (window.location.href.indexOf("home") > -1) { // What the url contains on the page you don't want these elements to display
$( "h2.space" ).addClass( "hidden" );
}
}
Of course, this solution requires jQuery and a hidden CSS class defined, like:
.hidden {
display: none;
}
Some sort of class like that may already be defined in the Wordpress theme you're using.
Fiddle for this solution: https://jsfiddle.net/p6af32td/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
In WooCommerce, for my variable products, How can I add a (gap) between woocommerce product page "Choose an option" button and "Quantity + Add to cart button"?
Here an explicit screenshot:
Edit: Here is a live link: http://www.noushasasart.com/product/harsh-bark/
Yes, I have moved the single "Add to cart" button just after the product title.
This seems to be a customization that have been done here (that's why you get this problem): The template 'single add to cart' has been moved up to the 'short description'.
Normally you should have a select dropdown field instead of the button "Choose an option".
So you should try this:
.single-product div.product .variations_button.woocommerce-variation-add-to-cart {
padding-top: 1em !important;
}
Or even more with: padding-top: 2em !important;
Or you can try to add some "top margin" too: margin-top: 1em !important;
But not sure it will solve your problem as the only efficient way should be to have a live link.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So pretty much what I want is to make something like this. http://www.woodbuffalo.ab.ca/Visiting/Accommodation-and-Dining.htm
See how the border around the content area changes depending on the part of menu you're in?
I have an idea in mind, but I want to know if there are easier ways to do this.
Edit: okay, my idea: I'm not even sure if this would work, it would be to make a different class for the content menu depending on what category that page belongs to, and then style these classes in CSS with the colours I want. But I feel like there's a better approach for this that I don't know.
ID the pages separately and then style the certain elements in question separately while distinguishing them with the unique page Id's. see the example below.
/* Example */
#page-id Element-in-question {
Whatever_you_want_to_happen_goes_here!
}
HTML
/* Home page HTML */
<body id="home">
<h1>Home</h1>
</body>
/* About page HTML */
<body id="about">
<h1>Abou</h1>
</body>
CSS
#home h1 {
color: red;
}
#about h1 {
color: green;
}
With the above example, h1s on the home page will be red while h1s on the about page will be green.
Wordpress/PHP
If the pages are dynamically generated you can implement the body_class template tag into a theme just by adding <?php body_class(); ?> to your opening body tag as shown below. That assigns unique classes to all the pages.
<body <?php body_class(); ?>>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am using Sunrise Theme from s5themes.com , and I was wondering if in the individual pages I can have a different Header Image, because from what I can tell they use the same CSS code in displaying the header image on the Home Page.
Here is the screenshot of the Home page showing the Image as header
And here is the screenshot of the a Page (About Us) which uses the same Image (the brown texture with green part) as header only seemed zoomed-in.
I tried digging into the code and I believe this is the part in the Styles.css that deals with it.
CSS
.header-wrapper {
background: #333;
background-image: url(img/wood-only.png);
background-attachment: fixed;
background-size: cover;
min-height: 200px;
So I edited the code above, unfortunately it also affects the Image in the Home page
I tried setting the background-size into
background-size: auto;
Ideally I can work with editing the template files but I am not familiar with WordPress' structure, and now I am not sure how to procede.
In WordPress, the header is defined by default in "header.php". You need ftp access, and copy header.php, rename it header2.php, make your changes, save. Then copy whatever your main page template is, and replace the with and save that as a different file, such as main2. Make sure to change the name in the commented area at the top so WordPress will show a distinct name for that template. Upload your new pages to your theme directory. On the pages which you want to have the changed header, select your new page template and save.
Walk in the park.
I managed to solve this without relying too much on creating new templates, by using JetPack plugin.
And took advantage of it's ability to add Custom CSS
This is the CSS line I added
body.page .header-wrapper {
background: #333;
background-image: url(http://image-url/image.png);
background-attachment: fixed;
background-size: auto !important;
min-height: 200px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Im currently working on having a button to upload a file, but i dont want to use the default input[type=file]
here's my snippet:
%button.btn
Upload your own
%input{ :type => "file", :class => 'file-input' }
and here's the css:
left: -34; // to align it with the button
top: -23;
position: relative;
opacity: 0;
currently it works, im just not sure about the markup. twitter has the same structure also when trying to upload a profile photo.
Set the opacity of the input file button to 0 and position it over the styled button div.
Why don't you just use:
<button type='file'>Content</button>
It works the same.
Try this
Select a file: <input type="file" name="img">
more details Here