Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Roxane
Go to solution Solved by kale,

Question

  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

12 answers to this question

Recommended Posts

  • 5

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);

Edited by kale
Link to post
  • 0

@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 post
  • 0

@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 post
  • 0

@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 post
  • 0
Guest

@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 post
Guest
This topic is now closed to further replies.

×
×
  • Create New...