StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Need help with CSS for widget sidebar for Metro Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Need help with CSS for widget sidebar for Metro Pro

This topic is: resolved

Tagged: , , , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 22, 2020 at 3:41 pm #501551
    DJ Carl
    Participant

    Hello,

    I am working on a staging website using the StudioPress Metro Pro child theme. I’m trying to produce a CSS colored box for the sidebar widget area.

    Help...

    [HERE IS CODE]

    https://djcarl.com/_website/brand-box.jpg
    October 23, 2020 at 6:49 am #501562
    andytc
    Participant

    Upload the animated gifs to your media library and make a note of the path of the gif's

    Go to widgets and drag a HTML widget into the sidebar - Give the widget the title - 'BRAND BOX HERE' as shown in your image example -

    Add the code below into the HTML widget , CHANGE THE IMAGE PATHS TO YOUR OWN - This bit

    /wp-content/uploads/2020/10/corporate-4.gif

    <h4 style="text-align:center;background: #B0C4DE;margin: 0;padding: 10px 0 0 0;font-weight: 600;">BRANDS TRUST MUSIC</h4>

<div id="gallery" class="gallery gallery-columns-2 gallery-size-thumbnail">
	
	<figure class="gallery-item">
		<div class="gallery-icon">
			<img src="/wp-content/uploads/2020/10/corporate-4.gif" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy">
		</div>
    </figure>
	
	<figure class="gallery-item">
		<div class="gallery-icon">
			<img src="/wp-content/uploads/2020/10/corporate-3.gif" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy">
		</div>
    </figure>

    <figure class="gallery-item">
		<div class="gallery-icon">
			<img src="/wp-content/uploads/2020/10/corporate-2.gif" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy">
		</div>
    </figure>
    
    <figure class="gallery-item">
		<div class="gallery-icon">
			<img src="/wp-content/uploads/2020/10/corporate-1.gif" class="attachment-thumbnail size-thumbnail" alt="" loading="lazy">
		</div>
    </figure>

</div>

<h4 style="text-align:center;background: #B0C4DE;margin: 0;padding: 0 0 10px 0;font-weight: 600;">Expert DJ Carl&copy;</h4>

    Add this Custom CSS into the Customiser css section

    .sidebar .widget .gallery {
    background: #B0C4DE;
    margin-bottom: 0;
    padding: 20px;
}

.sidebar .widget .gallery-icon {
    background: #fff;
}

.sidebar .widget .gallery-item {
  padding: 3px;
}

    That's it , you're all set. We've used the output from a gallery widget as the base for the html. If you ever need to change the columns , just edit this section -

    gallery-columns-2

    change the number to 3 , 4 etc and add any extra images.

    October 23, 2020 at 2:53 pm #501569
    DJ Carl
    Participant

    Thank you AndyTC!

    I worked all day yesterday and this is what I did. My only issue is finding an editor that works just like the Metro Pro website. This same code had different results in "SUBLIME TEXT EDITOR" and the "W3SCHOOLS CSS EDITOR"...

    <html>
<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<style type="text/css" >
.main-box{
height:300px;
width:300px;
background:#B0C4DE;
border: 1px solid #4169E1;
}

.brands {
width:110px;
height:90px;
background-color: #FFFFFF;
background-image: center;
margin:5px;
}
</style>
</head>
<body>
<div class="main-box"> 
  <h4 style="text-align:center; padding-top: 10px;">Brands TRUST Music</h4>
  <div class="row" style="margin-left:40px;"> 
    <div style="margin-left:-25px;"><img src="https://djcarl.com/animations/corporate-1.gif" class="brands" style="margin-left:25px;"></div>
    <div style="margin-left:25px;"><img src="https://djcarl.com/animations/corporate-2.gif" class="brands" style="margin-left:-25px;"></div>
  </div>
  <div class="row" style="margin-left:40px;"> 
    <div style="margin-left:-25px;margin-top: -15px;"><img src="https://djcarl.com/animations/corporate-3.gif" class="brands" style="margin-left:25px;"></div>
    <div style="margin-left:25px; margin-top: -15px;"><img src="https://djcarl.com/animations/corporate-4.gif" class="brands" style="margin-left:-25px;"></div>
    <div style="margin-left:30px;">
      <h4 style="text-align:center">Expert DJ Carl&copy;</h4>
    </div>
  </div>
</div>
</body>
</html>
    October 23, 2020 at 4:14 pm #501571
    andytc
    Participant

    Ok, no clue what that code is all about, hope your not using that in a sidebar , If it’s working then cool

    October 23, 2020 at 4:25 pm #501572
    DJ Carl
    Participant

    Yep. It worked through ALOT of trial and error - See Here

    I just need an editor that produces the same results as the website because initially, the code looked great in the sublime text editor and like crap on the metro pro site...

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Need help with CSS for widget sidebar for Metro Pro’ is closed to new replies.