I'm experiencing some difficulties understanding what is happening here:
The green color and hover effect is being applied to the add to cart button on the products list page
http://www.jkadengeart.com/gallery/
but is not being applied to the add to cart button on the single product pages
http://www.jkadengeart.com/gallery/p...n-prints-only/
Also, when I do float:left, the button still remains flush right.
Your help is very much appreciated.
Issue 01
In gallery page you are giving green color exlusively for #mp_product_list input.mp_button_addcart
But there is no div with the same ID in single page.
So, Add or remove the ID
like
input.mp_button_addcart {
...
}
or
#mp_product_list input.mp_button_addcart,
#single_container input.mp_button_addcart {
...
}
Issue 02
Float left is not working because you have given float:right to form
form.mp_buy_form {
float: right;
}
Change it to left
form.mp_buy_form {
float: left;
}
Like this please add below selector position:absolute;
css
#mp_product_list input.mp_button_addcart {
margin: 0 0 50px;
position: absolute;
}
.mp_grid .mp_product_detail {
margin-top: 63px;
vertical-align: top;
}
Related
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
I want to change the logo and main menu in the header on this page only:
https://www.maisondefemmes.com/galentines-day/
I've tried updating the css and only managed to edit the search and cart colours.
I've tried using both content and background-image, as well as using logoimg bg--dark rather than #logo but to no avail.
.page-id-3055 #logo {
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
}
I want the logo and main menu to be #b50c3f but they don't budge. I've managed to change Search and Cart.
The Logo is a html img tag and you can't change it that way. The content attribute only works for pseudo elements. One solution would be the following:
.page-id-3055 .logolink > img {
display: none;
}
.page-id-3055 .logolink:before {
display: inline-bloc;
content: url(https://www.maisondefemmes.com/wp-content/uploads/2019/01/mdf-retina-logo-red.png) !important;
width: 100%;
height: 50px;
}
You can detect url with jquery and then change logo and menu by jquery css
if (window.location.href.indexOf("galentines-day") > -1) {
// do something
}
I am using ReadMore.js on my website, it is a plugin that creates a "readmore/close" button that toggles the visibility of content.
Currently the 'read more' button is aligned to the left under the article it collapses. An example of this code is on http://jedfoster.com/Readmore.js/. I would like the button to align to the right.
I have looked through the documentation, there doesn't seem to be any configuration that allows me to change the alignment. The code that is produced by the script doesn't have a class attached:
Read More
Is there a way of creating a class that targets the 'data-readmore-toggle'?
I found a way:
[data-readmore-toggle^="rmjs"] {
text-align: right;
}
This targets all the datatypes that begin with rmjs.
article + [data-readmore-toggle] {
text-align: right;
}
OR
[data-readmore-toggle] {
text-align: right;
}
Here is a fix
a.article.atn {
text-align: right;
}
Or
a{
text-align:right
}
I've been trying to hide everything apart from the main content on the following Facebook post
I've been injecting the following css without luck - can someone please help?
html body * {
display:none;
}
#contentArea {
display:block;
}
Below is a screenshot of what I'm after.
With body * you are hiding every child.
With #contentArea you are showing this block, but still - body * persist for child elements AND parent elements.
You have to specify much more rules to hide everything else.
As mentioned before, you cannot display an element which has a parent that was hidden. Anyway, Facebook's layout is simpler than I thought, all you have to do is hide two elements: the header and sidebar. This of course assumes that a user is not logged in.
Inject this CSS
#pagelet_bluebar, #rightCol {
visibility: hidden;
}
Result:
Result (user logged in):
To hide the chat sidebar, you can add #pagelet_sidebar to the CSS.
#pagelet_bluebar, #rightCol, #pagelet_sidebar {
visibility: hidden;
}
To conclude: Hide the main parts instead of everything, or use jQuery to target all except your element as suggested by #MaVRoSCy.
Thanks everyone - the following seems to be the combination of everyone's answers:
#leftCol, #pagelet_bluebar, #rightCol, #pagelet_bluebar {
visibility: hidden !important;
display: none !important;
}
html ._5vb_.hasLeftCol #contentCol {
border-left: initial !important;
margin-left: initial !important;
padding-left: initial !important;
padding-top: initial !important;
}
._5vb_, ._5vb_ #contentCol {
background: none !important;
}
I am building a webapp in .net using some of the AJAX features; in this case it is TabContainer.
Below is a screenshot of the area I want to play with.
The menu on the left is the tabs of TabContainer. The right side is tab's content. I would like to have the "Update PCR" button to be right underneath "Disciplines Affected". The problem is that the left and right side are a part of ONE block, which is TabContainer.
Are there any suggestions to how would I format the CSS of the Button to align right underneath TabContainer's menu? I could add the button as a part of the menu but, then I would have to set the control to AutoPostback, which defeats its purpose in this case in the first place... Any suggestions would be appreciated!
EDIT:
Here is the existing CSS
.ajax_tabController .ajax__tab_tab
{
background-color: #3c6f91;
padding: 5px;
border: 1px solid #ffffff;
color:#ffffff;
border-left: 3px solid #5AB0DB;
}
.ajax_tabController .ajax__tab_hover .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration:none;
}
.ajax_tabController .ajax__tab_active .ajax__tab_tab
{
background-color:#5AB0DB;
text-decoration: underline;
}
Also, there is CSS that overrides some settings to make TabContainer Vertical instead of Horizontal. I know, that there is a property .UseVerticalStripPlacement but it messes up with the height of the control and throws a JavaScript error.
.ajax__tab_header
{
float: left;
}
.ajax__tab_body
{
margin-left: 160px;
}
.ajax__tab_outer
{
display: block !important;
}
.ajax__tab_tab
{
width: 210px;
height: auto !important;
}
You need to position the top of the button relative to the bottom of the tab elements. This can be done with jquery. See How to position one element relative to another with jQuery?
It's going to be a bit hit and miss, but try something along the lines of:
.updatePcrButton {
position: absolute;
top: 100px; /* These will be whatever the measurement is to */
left: 5px; /* be directly under the last element */
z-index: 99; /* Arbitrary amount to put it above any other elements */
}
This is pretty messy to be honest - it relies on your not changing the position of the control thereafter.
Perhaps a better way would be to add an extra tab to the TabContainer and handle any Tab clicks yourself.
-- Edit -- May be more useful --
Nikita, I had completely forgotten about this as it was in an old Classic ASP app of mine, but you could try these two JS functions that are probably more useful to you:
function curTop(obj){
rv = 0;
while(obj) {
rv += obj.offsetTop;
obj = obj.offsetParent;
}
return rv;
}
function curLeft(obj){
rv = 0;
while(obj) {
rv += obj.offsetLeft;
obj = obj.offsetParent;
}
return rv;
}
They pull the position from the specified object. If you add the height of the button that you want to position under then you may find this improves the location for you and prevents any funny business with CSS.
Kind regards,
Westie.