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

Customise text background of summary items


Question

Site URL: https://www.camberwellarts.org.uk/caf21-inside-out-events

Hi, I'm looking to match the style of grey background of the summary on this page: https://www.camberwellarts.org.uk/whats-on to the two summaries on this page: https://www.camberwellarts.org.uk/caf21-inside-out-events

I made these edits about a year ago so struggling to remember how to action this to the individual cards and not fill the entire block. I know I need to target these sections specifically as I only want this across the four pages listed at the top (EVENTS | EXHIBITIONS | OPEN STUDIOS | ARTS MARKET)  but can't figure out the base of the code. 

Any recommendations into how to remove the comma between category boxes would be really helpful too. 

Password: caf21

Thank you! 

Link to comment

5 answers to this question

Recommended Posts

  • 0
1 hour ago, colleenalicee said:

bottom summary is a carousel

Oh I just noticed this. Carousel summary act/respond as a block behind the scene. You may have to choose another summary option otherwise the CSS targeting individual summary item will distort when the screen size changes.

1 hour ago, colleenalicee said:

Is this because of the added padding on the cards now making the block wider than usual?

Yes

.collection-type-events-stacked.view-item main#page {
    padding-left: 10vw;
    padding-right: 10vw;
}

#page-section-5f819972258d731d2133af79 .sqs-block-summary-v2 .summary-item.positioned {
  background: #f2f2f2;
  padding: 1vw;
}

Neither of these seems to be targeting any elements in the password protected page. Maybe the carousel itself is the problem. 4th item is on the next line because of padding given to .item-summary

 

1 hour ago, colleenalicee said:

I don't want this to be across all summaries on the site only on a few select pages - what is the best way to target these? With a Block ID? 

Yes. Something like this will limit the CSS to only that block:

#blockID .class
{
    /* code here */
}

 

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0

Normally this should work:

.summary-item {
background-color:grey;
margin:5px;
padding:10px;
}

But it seems to be messing up the padding of the second summary, so I targeted each element inside:

.summary-item {
background-color:grey;
margin:5px;
}

.summary-thumbnail-outer-container {
padding:10px;
}

.summary-title {
padding:10px;
}

.summary-excerpt {
padding:10px;
}

.summary-metadata-item {
padding:10px;
}

However, your second summary items are not collapsing into single column when I minimized the site. This causes the above CSS to mess up. Did you do something to keep them affixed at 3 columns? Maybe that's also why the first code has a messed up padding.

humaneer

 

 

Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
  • 0

Hi, thanks for your response. The first code seems to be the thing I'm looking for but not sure why it's cutting off with the calendar summary. I think because the bottom summary is a carousel this splits its width rather than stacking.  

When applied this is forcing the last entry to drop onto a new line (see attached) despite it usually fitting. Is this because of the added padding on the cards now making the block wider than usual?

This was the previous CSS I've used on the grey option - could either of these be the issue?

.collection-type-events-stacked.view-item main#page {
    padding-left: 10vw;
    padding-right: 10vw;
}

#page-section-5f819972258d731d2133af79 .sqs-block-summary-v2 .summary-item.positioned {
  background: #f2f2f2;
  padding: 1vw;
}

I don't want this to be across all summaries on the site only on a few select pages - what is the best way to target these? With a Block ID? 

Thanks!

Screenshot 2021-06-08 at 15.08.11.png

Link to comment
  • 0
On 6/11/2021 at 2:09 AM, colleenalicee said:

Hi, I've swapped out the carousel and this seems to be working perfectly - thank you so much for your help!! 🙂 

Do you need fix these?

Site URL – https://www.camberwellarts.org.uk/

1. (Tablet-Footer) Increase column 2 text width?

camberwellarts.org_.uk-01-min.png

2. (Homepage) Change google captcha link color?

camberwellarts.org_.uk-02-min.png

3. (Mobile-Arts directory) Make 2 columns to reduce height?

camberwellarts.org_.uk-03-min.png

4. (Tablet-About Us) Increase width, reduce title?

camberwellarts.org_.uk-04-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...