Jump to content

Can I add CSS to one text block, but not others, within a page?

Recommended Posts

  • Replies 12
  • Views 23.2k
  • Created
  • Last Reply

Yes, you need to identify the block id, then style that block with CSS. To identify the block id, you need to use something like 'Firebug' extension for Firefox, or 'Inspect Element' built into Chrome or Safari. You 'right-click' on the area (block) and then look for something similar to:


id="block-87bb9c00b62cd4526e54"

with the number being unique to your block.

Once you get that number, you use it with CSS to style it, either in your CSS file, or on your 'Page Header Injection Point' (both work the same, the difference being the 'Page Header' version applies to only that particular page, whereas on the CSS file, the code can be applied across the site). I prefer to use the CSS file for organization purposes (even if its only page specific CSS).

The CSS you would add to the CSS file ('Change Style' (paintbrush)) > 'CSS' would look something like:


#block-87bb9c00b62cd4526e54 { background: pink; }

If you were to add it to your 'Page Header' section, you need to add the style tags, so it would look like this:


<style>
#block-87bb9c00b62cd4526e54 { background: pink; }
</style>    

If you post your page and describe which block you want to color, I could provide the exact code for you.

Edit: If you are trying to add a background image (instead of a color) the CSS would look a little different. It would be:


#block-87bb9c00b62cd4526e54 { background-image: url(/storage/your-image.jpg);

Link to comment

@marko911 If you wanted to put black backgrounds on each text block / the form on that page, this is the CSS you'd add:


#block-3fcfcd473bf0f06bbd0b,
#block-e924b1b8ea347dbded39,
#block-2508506bcc2d0accb4e0,
#block-963ecf6b1facca5032fe,
#block-43684d4f77f9dcfd24a2, 
#block-fc878424ec136a9a460a { background: #000; }

However, it doesn't look very good, so you could add some padding to it, which would look like this instead:


#block-3fcfcd473bf0f06bbd0b,
#block-e924b1b8ea347dbded39,
#block-2508506bcc2d0accb4e0,
#block-963ecf6b1facca5032fe,
#block-43684d4f77f9dcfd24a2, 
#block-fc878424ec136a9a460a { background: #000; padding: 5px;}    

However, if it were my site, rather than color the boxes individually like that, I'd add a background to the entire content section, and then use 'rgba' to set a black transparent background, and round the corners for a nice touch, which would look like this:


#collection-51796cc9e4b0743cbe99d3c1 #content {
   background: rgba(0, 0, 0, .5);
   -webkit-border-radius: 16px; 
   -moz-border-radius: 16px; 
   border-radius: 16px;
}    

That code will apply this to only your 'Personal Training' page. The first 3 numbers after the 'rgba' text is the RGB color (for example, white would be 255,255,255) and the last number is how transparent it is -- .5 = 50% transparent -- .1 = 10% (very light) .9 = 90% (almost solid).

Link to comment
  • 2 years later...

@kale Hi! I'm having a really hard time finding the block in the viewsource. I only brings me to the block in the footer that says "powered by squarespace" is it possible that my template doesn't allow for me to add a background to a textblock? I'm using the Avenue template.

Any help would be much appreciated. I'm going crazy trying to mimic this one chick's homepage http://www.sprucerd.com/ . she has a lot of text boxes with backgrounds on her homepage and her about section. I'd like to do the same.

Link to comment

@kale Hi! I'm having a really hard time finding the block in the viewsource. I only brings me to the block in the footer that says "powered by squarespace" is it possible that my template doesn't allow for me to add a background to a textblock? I'm using the Avenue template.

Any help would be much appreciated. I'm going crazy trying to mimic this one chick's homepage http://www.sprucerd.com/ . she has a lot of text boxes with backgrounds on her homepage and her about section. I'd like to do the same.

Link to comment
  • 5 months later...
  • 3 months later...

@kale this is awesome but I can't seem to get it to work. I want to add a teal transparent background to some text on an image banner for one page (Registry on www.clockessy.com) using this in the page header:

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.