This is my first post here. I'm trying to customize a button of "Add to wishlist"/ "It's already in wishlist" text in it to a website for a client, and that button is found in 2 separate pages. It's a website I made in Wordpress and Elementor mostly, but I have to customize that button myself because I can't do it from Wp/Elementor.
I've used this code to customize that button:
.tinvwl-loop-button-wrapper{
background-color: #222529 !important;
padding: 4px 5px 4px 4px !important;
margin: 10px 25px 0px 25px !important;
font-size: 14px !important;
border-radius: 3px !important;
font-weight: 600;
}
The problem is that in the Product page the button looks well in Related Products (Produse Similare in Romanian language) section of the page, but in the Shop page (called Magazin in Romanian) the button has too much space left and right of the text.
I noticed that the buttons share the same classes in both pages, so if I add something like max-width: 160px; then the button goes far to the left in Shop page, and adding margin-left to it won't work because then it ruins the button on the other page. What can I do to remove all that space left and right inside of the button and have the button similar to the "Read more" (Citeste mai mult) or "Add to cart" (Adauga in cos) buttons?
PS. I know I used too much the !important rule. It's my first ever website where I'm using CSS and removing the rule from all the code could potentially ruin it all I think and I'd have to start from scratch.
Product page
Shop page
You can add a separate class for one of the buttons where you set the margins you need.
Simple replace with it, it will working fine
.tinvwl-loop-button-wrapper {
margin: 10px 41px 0px 41px !important;
}
The problem is the background color is set to the button wrapper in loop page.
.tinvwl-loop-button-wrapper {
background-color: #222529 !important;
}
you need to remove the above css line and add it to the button itself.
.tinvwl_add_to_wishlist_button {
background-color: #222529 !important;
}
you will need to add some padding then to the button. There are many !important statements overriding each others. you will need to adjust that, It will be much harder to fix later by adding more.
Hi George I checked the links you have provided.
You need to use a parent class that exist in Shop page but not in related products which in your case is .wcpa_has_options and you need to combine this with the button class that you are trying to resize > .tinvwl-loop-button-wrapper
at the end you will get this class combination which will only change the button size on shop pages.
.wcpa_has_options .tinvwl-loop-button-wrapper {
width: 152px;
align-self: center;
}
I have tested it and it works just the way you want!
Glad to be help. Let me know if you have questions.
Related
I need to do school work. I need to link the button and put it to the right side of my page but every time i put the link or button to the right it does not work.
What html code should I put and in what order to have button on the right and link to it. On the photo is what I have right now.
This is a simple thing - as noted above - you need to float it to the right.... BUT if you are floating something - this will have consequences on the next elements - so you will also need to clear the float.
Another thing to think of - is that a p element is a block level element - so will take up the entire row - whereas an a element is an inline level element - meaning it won't. This is why doing it this way causes the button to be on the previous line up from the p - which is on the next row. You can alter that - but it needs to be planned out a bit.
Just so you understand the structure of the HTML - this may also allow you to have a different structure to the code. Also - I only put in the text that showed up in the image so it is not a full row.
Also note that I have applied the CSS to the element in the CSS portion as opposed to inline styling - this is better code structure as it keeps the HTML and CSS separate. I also whacked in some styling (from https://www.thoughtco.com/styling-links-with-css-3466838) to give link a button like look.
.button{
float:right;
border-style: solid;
border-width : 1px 4px 4px 1px;
text-decoration : none;
padding : 4px;
color:black;
border-color : #69f #00f #00f #69f;
}
.button:hover {
border-color: black;
color: #00f ;
}
p{
clear:both
}
<a class="button" href="2.html">Next</a>
<p>The most important reason of why you should remain heal</p>
If you put this html code element in:
<button>this page
You will get this:
<button>this page
</button>
And this to your CSS:
button {
float: right;
}
You will get at end this:
<style>button {
float: right;
}
</style>
<button>this page
</button>
You have to add a little bit of CSS.
<button style="float:right;">
I'm fairly new to CSS / HTML, but usually can figure something out. Not with this issue though... I've spent 2 days trying to fix it with no joy
Using WP 3.9.1 and WooThemes Mystile which comes with a custom css to make changes in; no child theme needed. When I place images with captions on a page using left align, some will and others vigorously refuse. In older WP, it was always align all images left to create rows, but not with 3.9.1 it seems. I've tried everything I can think of, but those images that are supposed to be aligned left are actually right of center.
Using Firebug or Safari Inspector, I've tried to align them left and even using a negative margin-left will not place the image where it belongs. It's almost like there's some kind of page break, for lack of a better term, that is making it set right of center. Like it thinks that position is left.
I am not using any gallery or plugin, just adding images to the pages with captions in the text box, not visual. Most of my Galleries under Store are a mess. :(
Here's an example of one: Tuscany Gallery Most of the Galleries I want 2 landscape in a row or 3 verticals. Sometimes with an odd number of images I might center 1 - 3 images, but most are left align.
Any help would be very appreciated! Thanks!
Re: the Body css code
I have a few color changes and more div#attachmet_number (didn't think you needed all them), but this is about it.
:active, :focus {
outline-style: none !important;
-moz-outline-style:none !important;
}
a {
outline-style: none;
-moz-outline-style: none;
}
a:before {
outline: none !important;
}
a:imag {
outline: 0px none;
}
#sidebar .post-46 {
display: none !important;
}
article.post-46 img.alignleft {
margin: 0 1.618em 1em 16px;
}
.post .alignleft, .type-page .alignleft {
margin-bottom: 50px;
}
.post-282 .wp-caption img, .type-page .wp-caption img {
margin: 0 0 0 0.4em;
}
div#attachment_283 {
margin-left: 42px;
}
div#attachment_286 {
margin-left: 42px;
}
div#attachment_291 {
margin-left: 42px;
}
I'm not quite sure if that's what you need or not. The div#attachment_number is the image within a box with caption (title) below it.
HTML of images with caption
[caption id="attachment_516" align="alignleft" width="407"] Duomo di Pisa[/caption]
Following your comments above on your question, your fourth photo (Autumn Drive) specifically is getting pushed to the right by the bottom edge of your second photo (Duomo di Pisa).
It appears that you've added a specific width to each div in your HTML. If you were to add there also a specific, equal height to each div, then they would align and allow the divs below to float to the left.
A greater ideal might be to declare a class for your landscape-oriented divs in your CSS, define a uniform width and height there, and assign that class to all landscape-oriented divs. That way, you could easily change that width and height in one place, and it would apply to all divs with that class assigned (and multiple classes can be assigned to a single div; just separate them by spaces, like class="landscape framed dark" for example).
I am trying to fix a couple of problems when you view this web page in IE7.
(the web page looks great in iE8 and iE9)
I have uploaded the single web page onto a test site:
http://www.jrdesign-website.co.uk/bar_menu/bar_menu.html
When the page has loaded, scroll down to view. You will see the prices on the right hand side. The small duplicated full stops should line up with the prices and food description.
Any advice would be greatly appreciated
SO your code has a with the dots underline on it as a repeating background and within that there is a wrapper div floated left with the food item name and nested within a that a class .bar_font_bold_med which is 'float: right'.
Two possible ways of getting to a solution.
1\ Why not have the price i.e. the in its own instead. That will sort out the positioned-on-the right goal. It will also allow you to use or middle or top etc on the price to independently adjust its vertical position in relation to the food item. Also use CSS to supply the dotted underline. Eg consider using a border-style on the lefthand thus.
border-bottom: 5px dotted #fff
How you attach the style is up to you. Perhaps a CSS classname on the relevant s is the best way i.e.
<td align="left" width="565" height="xxx"
bgcolor="#000000" background="images/yellow_dot.jpg"
... becomes...
<td class="foodItemCol" height="xxx">
...and you have the CSS styles
.foodItemCol {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
Or if you go with my suggestion of having another for the price then use this CSS selelector which means you will not have to bother adding a classname
#bar_menu_text table td {
border-bottom: 5px dotted #ffffff;
width: 565px;
background-color: #000000;
}
#bar_menu_text table td + td {
border-bottom: none;
width: auto;
background-color: #000000;
}
What the second style selector is saying where the second or subsequent sibling appears after the first then overwrite the styles that where applied in the '#bar_menu_text table td' rule above i.e. so the price column does not have a dotted underline.
PS You have used a WYSIWYG editor to generate the code for this page haven't you? I have modified my answer baring that in mind as I guess you aren't used to coding HTML /CSS by hand.
PPS you don't need the z-index:5 or any z-index's at all whatsoever...they are only useful when the element the are applied to is position: relative or position: absolute etc.
How do I cleanly style a HTML + CSS horizontal tab bar so that the tab bar has a line across the bottom that's hidden or suppressed for the active tab?
In other words, I'm trying to do the same thing that StackOverflow does for its tags:
My tab bar is set up as an ordered list with
ul
{
list-style: none;
}
li
{
float: left;
}
Update: I've already poked around sites with Firebug to see how they do it, but I feel like I quickly get bogged down in details. For example, StackOverflow's version has a border for the bottom of the whole div (which makes sense), and a white border for the bottom of the active tab (which makes sense), but then it makes the active tab's border overlap the div's border (and I'm not very clear on how it does that). It looks like Twitter Bootstrap does something similar. I'm trying to understand the general concept of how overlapping part of a container's border with the content's border works instead of copying and tinkering with CSS until I get something that appears to work.
All you need to do is put a bottom border on the <ul> (so that it stretches across) and then give the <li>'s a selected class, and make that one have a 1-pixel higher height.
Here is a very simple example: http://jsfiddle.net/V6gzS/
ok to point you in the right direction use firebug or chromes element inspector and just pick out the bits you need, so on this site for example what you are looking for are called tabs and they are styled like so
#tabs a.youarehere {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #ffffff;
color: black;
font-size: 120%;
height: 30px;
line-height: 28px;
margin-top: 3px;
padding: 0px 11px 0px 11px;
}
this is just a part of it but you can learn a lot by looking at some code
As I understand it you are capable of making the buttons by yourself, with the horizontal bottom line.
If that is the case, then make sure that this horizontal line is made as a border-bottom: solid 1px #CCC property on each button (the color might be different). At each page you then add the id id="current" to that one button that is the active page. In CSS you write:
#current {
border: solid 1px #CCC;
border-bottom: 1px solid white;
}
If you have any problems it might be solved by adding !important like this:
border-bottom: 1px solid white !important;
Therefore, this is just four extra lines of code in CSS and one extra HTML attribute in each of the files.
If dynamic menu
If you have a menu that is not static on every page, but maybe dynamically generated or placed in an included file, then the above will not be possible. Because then you can't easily add the new id on each seperate page.
In that case you might do some dynamic adding of the attribute. If a server side language is used, e.g. PHP, then you might be able to easily set up an if{...} command that checks the URL or a GET request or alike. Else you might use some javascript to check each button and add the attribute id if the button text equals some header on the page.
I hope you understand. Good luck.
I did it like this:
ul {
list-style-type:none;
}
li{
float: left;
border-bottom: 1px solid #CCC;
}
li:hover{
float: left;
border: solid 1px #CCC;
border-bottom:none;
}
I am trying to create a block of photos on my webpage (Which has a set width, I didn't copy that part of the code over). I have put the code into the JSFiddle link below.
http://jsfiddle.net/T2qHR/12/
I will recreate what I am trying to do on a graphic editor. Click here to view it: http://www.flickr.com/photos/adpartners/6630840127/in/photostream
I'm not sure what I am doing wrong with my css/html. Everything is stuck on the left because I used float left in one of my div tags. I really want the background to be centered, which it is, then have the images over the top of it, like so: 3 photos, 2 photos, 1 photo, 2 photos. They will all link to youtube videos, which I have already got the links already for that part of it.
Any help would be much appreciated. I have done 10-20 different versions of this code with
p, div, table, ol/li tags, and honestly don't know which one to use for this now.
If you see what I am doing wrong, please fill me in. I'm at a loss of code!
Many thanks for any help you might offer,
R
Use display: inline-block and text-align: center instead.
div.floatingPic { display: inline-block; padding: 12px; }
div.containerVid { border: 2px solid #99cc99;
background-color: #000000;
padding: 45px;
height: 890px;
border-radius: 10px;
margin-bottom: 25px;
text-align: center; }
As long as .containerVid is wide enough, images will continue to stack up until they no longer fit in the row. If you want to force a break early, simply add a <br /> (as you've been doing).
fiddle: http://jsfiddle.net/T2qHR/20/