Hi I'm using SquareSpace V6, with the Momentum template.
in this template there's an option to have the style of your gallery "full-bleed" or simply centered, but this setting is global and it applies to all the galleries on the website.
I'm trying to create some CSS code that will override the default and allow me to have a "full-bleed" gallery in the home page and the home page only, all the other ones will be left centered.
I've been inspecting the code with Chrome and I thought I had it, but nothing changes once I add my code to that specific page:
#collection-type-gallery { gallery-style:Full Bleed; }
Does anyone has experience with SquareSpace?
not exactly the answer I'm looking for.. but I found a workaround.
I created an empty page and added a background (with a snippet of code) to only that page.
(it only works if you want 1 single fullscreen image)
#collection-51b4ef7de4b0_use_your_own_here_62dc3410aaf3
{
background-image:url(http://static.squarespace.com/static/../background2.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
You can call out the homepage specifically by using:
.homepage { }
or you can use a source code inspector and find the unique id as a class on the element and call out any individual page like so:
.collection-51b4ef7de4b062dc3410aaf3 { }
Related
I am building a Wordpress site for my nonprofit using the theme Avada and trying to implement some basic custom code.
I am using a "Modal Text / HTML Link" with an image to link to a modal (a pop-up: https://avada.theme-fusion.com/design-elements/modal-element/ and documentation: https://theme-fusion.com/documentation/avada/elements/modal-element/). To help make it clear to users that they can click the image to produce the modal, I want the opacity to change to 70% on hover over just that image.
I currently have the below in the "text/HTML" field, but it’s causing the hover opacity effect for all images on the page rather than just this one image. How can I amend this code to only cause the effect for the linked image? I know so little about coding but feel like it probably has something to do with divs??? I also get the sense I'm accidentlly mixing css and html.....I think I need the html for this field OR I can have just the image source code in the html, and then implement css.
{<img src="https://staging2.pvdwaterways.org/wp-content/uploads/2021/07/Lilly-Manycolors.png" />
}
img:hover {
opacity: 0.7;
}
Here's a screenshot of the interface with the code entered
Thank you!
As #daniel Theman told already in the comment, you can set a class to your element in element edit on the first page at the bottom and then you add the code to custom css tab in avada theme options. Give your element a unique name as class like hoverop and add this to you custom css tab in theme options:
.hoverop:hover{
opacity:0.7;
}
I am developing a website with a large banner that displays differently on each page. The background image is not displaying when I put the background image on the page selector but it will work on the main banner CSS code.
This is for my wordpress site (WordPress 5.2) running a completely custom theme developed from scratch by me. Running PHP version: 7.0.33.
.page-id-15 .bannerImage {}
.postid-15 .bannerImage {}
I have tried both background image and background color with Chrome Developer Tools not displaying that it is seeing this style.
I have confirmed the correct page/post id of 15.
I have put the background image/color into .bannerImage and it displays as expected.
Not sure what else to try. This should be easy.
/// This will display background image and/or color ///
.bannerImage {
/* Set a specific height */
height: 337px;
/* Position and center the image to scale nicely on all screens */
background-position: left;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/// This will not display background image and/or color (showing color style) ///
.page-id-15 .bannerImage { background-color: #35CC4B; }
.postid-15 .bannerImage { background-color: #35CC4B; }
/// HTML Code ///
<div class="bannerImage">
<h2>Contact Us</h2>
</div>
/// Word Press Admin URL to show correct page/post number ///
http://box5308.temp.domains/~naiedmon/wp-admin/post.php?post=15&action=edit
/// URL ///
http://box5308.temp.domains/~naiedmon/contact-us
I expect to see a banner that is 337px high with a width of 100% that is different on each page.
What I actually see is a blank white banner space with the H2 displaying.
Chrome only outputs the .bannerImage selector and not the .page-id-15 .bannerImage or .postid-15 .bannerImage selector.
***** updated *****
Below I have added the code I am seeing when I look at Chrome Developer Tools. Unlike the suggestions I completely agree with should work (I have tried), my selector tag of .page-id-15 .bannerImage {} is not be read by the browser and displayed. I did also attempt .postid-15 .bannerImage {}. This is where it has me stumped.
Screen Capture of Code from Chrome Developer Tools
WordPress sometimes re-writes your CSS. I had this problem before. try using "!important" in all of your CSS attributes. this probably works.
I have had to move on and find another solution to my problem. Unfortunately I have not been able to successfully work with page ids as CSS selectors. My solution around the problem was to add additional classes and call them that way.
Example being on my about page to make a selector .about and attach my background image to that class. A simple fix but I was hoping to understand why I couldn't get the page id to work as a selector.
Onward and upward! Thank you to the community for your responses and attempts to help me out on this!
I was able to get help in the WordPress.org forum and so I thought I would put the answer here in case someone else has this problem.
What I did:
So, for some reason I decided to write my body tag like this (and continued to overlook the error):
<body class="body" <?php body_class(); ?> >.
I do not need to call the class "body". Once I deleted class="body" the correct body string was written and I can now call styles by page id.
The correct body tag in my case looks like this:
<body class="page-template page-template-page_fullwidth page-template-page_fullwidth-php page page-id-394 page-parent logged-in admin-bar no-customize-support" >
The exact advice I received:
The main problem is that you’re not calling the body_class() function
in your theme. Once you do that, the right body classes (like
page-id-15, etc) will be associated with the body element. Right now,
your body element looks like: <body class="topgradient">
If you change your site to another WordPress theme, and then inspect
the body element, you’ll see what it’s supposed to look like.
I am very thankful for communities like this and others!
I have a WordPress site where I added banner and sidebar filter option. But the banner shows as a conflict with filter option. If I added margin-top:300px then it goes down but this change applies to every page. I want to change this for the specific page only because I don't have banner on every page.
My site: http://motor.racedrivenonly.com/shop
Header image below:
There are classes added to the body tag in WordPress. Try to determine the proper body class ad you'll be able to add the margin based on a particular page template or type of page.
Try something like this:
.post-type-archive-product .blog-sb-widgets {
margin-top: 300px;
}
I know this can be done with custom CSS, but I can't figure out the right way to do it.
I think I can figure it out for all of them if you show me how to do it with just the title.
For example, this is the element I want to remove: <h1 class="page-title entry-title">
I know that {display: none} is the CSS to hide an item, but how can I do it for only a specific page?
the website is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Use h1.page-title { display: none; } to hide the title, this will affect ALL pages that use the same template.
If you want to do it specifically to this post use the following:
#post-28 h1.page-title { display: none; } the post number will lock it to that page only.
Based on that page, the body has classes
<body class="wordpress... singular-page singular-page-28 layout-1c"
28 is the page id of that page, so if you just want a CSS fix for this, you can use the code below
.singular-page-28 h1.page-title{
display:none;
}
note, if you move the wordpress to another webhost, via export/import, you'll need to look at the page_id again if it changed
See this fiddle, if this is the way you want it.
http://jsfiddle.net/Qj4Us/
It simply looks for the targetted URL like "http://myinneryoga.com/strange-exotic-fruit-supplement/" and if found, hides the h1 with class=page-title
Instead of modifying CSS which will affect all pages we can make use of simple plugin. Below are the steps :
Click on Plugins > Add New.
Now search for Hide Title.
Install and activate the plugin.
Now click on Pages > All Pages.
Now edit the particular page where you want to hide the title.
Now, In the right panel you can see an option to Hide title. Check that and publish your changes.
Hello all I am trying to work through (learn) MVC3 and I was playing aroudn with formatting my view using CSS. When using html / webforms have been able to use div tags and apply to that div teh approiate css style.
When using MVC adn creating the layout in my view I have found that multiple CSS styles are not being inheritted.
for example: (sorry for the image but razor syntax seemed to fail on the code cut/paste
In the above I had a div tag for certain sections. however when I used the class property
<div class="myfirststyle" >some content</div>
for each of these div tags only the first one would be detected. The remaining div tags seemed to inherit from the main body style. also defined in the main CSS file.
Can anyone point me to some information on how to setup and style div tags within a view using CSS instead of the stylel property as shown in the above image OR is this correct as you cannot directly call CSS styles from a view as they are only recognized by the page layout.cshtml or masterpage?
Thanks in advance
Update: to help troubleshoot what is happening please refer to the following
Code within the view (using razor engine)
code within the CSS
output from developer toolbar notice how first div layer attributes are detected
output from developer toolbar notice now how image div does not have a style applied
What is interesting is that when viewing the source in html you can still see the CSS tags within the DIV tags they are just not being picked up or inherited for some reason after the first node/div tag
Thanks again for any pointers
Definitely not the case. Something else is going on.
Did you include your CSS file in the view or it's master page?
<link href="#Url.Content("~/Content/YourCSS.css")" rel="stylesheet" type="text/css" />
Or manually add the CSS to your view?
<style type="text/css">
div.myfirststyle { ... }
</style>
If so, have you confirmed the spelling of classes? Typos happen, and we can't see from your image whether or not you added classes to divs. Add some of your code even if you can't format it well enough :)
There is definitely something else funky going on... it has nothing to do with MVC*, it occurs when the browser tries to render it, so the problem must lie with the html & css.
If would recommend validating your HTML and CSS, this will show errors with missing closing tags or anything of the likes that can cause these sorts of errors.
I would recommend using Firefox or Chrome with the Web Developer Toolbar to make html & css validation easier.
*nothing to do with MVC directly... indirectly, sure.
Unfortunantly the error was all on my part. While I did have an error withiin my CSS file regarding the use of the position attribute within my styles. below is the updated style:
.resultController
{
position:static;
width:90%;
border: 1px solid #7C90BE;
margin:5px;
}
.resultImage
{
display:table-cell;
color:Green;
height:36px;
width:36px;
}
.resultContext
{
display:table-cell;
padding:3px;
left:50px;
color:Red;
}
.resultButtons
{
top:5px;
}
The larger problem (all my fault) was the browser was not purging teh cache on close. After dumping the cache and reloading the page the styles began to render correctly. Thanks to all for taking the time to look at this and offer your input.