Need some CSS modifications for the DEFAULT TEMPLATE in the Sela Theme

  • Author
    Posts
  • #3069899

    Dear Happiness engineers,

    I have some CSS modification requests.

    Since I am now going to be using the DEFAULT TEMPLATE for most of my pages from now on in the Sela theme, here are my needs:

    1. MAIN SIDEBAR WIDGET REQUESTED CHANGES

    I would like to see the sidebar widget moved to the right (so the very right side of the width of the sidebar widget is about 25 pixels shy of the right bottom corner of the FEATURED IMAGE banner. Keep the width of the SIDEBAR WIDGET the same- (250 pixels, or whatever it is.)

    Plus, there used to be the option of image alignment in the Sidebar Widget (left, center and right) where did that go??? Anyhow, once the sidebar widget is shifted over to the right to the position I am looking for, I would like the magnifying glass icon center aligned instead of left aligned (as it currently is). Plus, the white space between the bottom of the magnifying glass icon and the SEARCH widget is too much. Ideally, I would like no more 25-30 pixels (max) from the bottom of the magnifying glass icon image and the words -SEARCH BBJ FOR BEER- (the title of the search widget).

    I would like something similar for the BBJ ARCHIVES widget as well, with a difference. As with the SEARCH widget above, I would like the ARCHIVES ICON image center aligned. However, I would also the Archives DROP DOWN MENU centered right under the words “-BBJ ARCHIVES-“. I would also like the same amount of white space between the ARCHIVES ICON image and the words -BBJ ARCHIVES- to be between 25-30 pixels.

    2. CONTENT WIDTH FOR FULL SIZE IMAGES AND TEXT (LEFT OF THE MAIN SIDEBAR)

    I would like the content width (images and text) in the DEFAULT TEMPLATE to start 25 pixels to the right of the left bottom corner of the FEATURED IMAGE BANNER and end around 25-30 pixels before the left edge of the MAIN SIDEBAR widget, whatever what width winds up being, I will work with it. I feel that the default column width (for images and test) has always been too narrow.

    Side question: how can tables be added in the column without table “lines” showing?

    I hope someone can help me! (TheSacredPath- I see you are still here… can YOU help?)

    Thank you,
    Gordon

    The blog I need help with is belgianbeerjournal.com.

    #3070065

    Hi there, for #1, let’s start with the following which centers the images within the image widgets and centers the dropdown in the archives widget.

    .widget_media_image img {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .widget_archive select {
      margin-left: auto;
      margin-right: auto;
      display: block;
    }

    The overall content wrapper, .content-wrapper, has a 4.661% left and right margin to keep a consistent space on the left and right of the content and sidebar. You can adjust the left and right padding with the following, which only affects screens/windows px and wider (when the sidebar is on the right of the content).

    @media screen and (min-width: 850px) {
      .content-wrapper.with-featured-image {
        padding-right: 25px;
        padding-left: 25px;
      }
    }

    On the tables, they are difficult to get to work properly on responsive designed themes, such as Sela. It all depends on the nature of the content and the number of columns you are going to be using. If you can give me some details on the table and it’s content, I can see what can be done. If you wish, you could put a table into a draft page or post and don’t publish it, and then let me know the name of that page or post and I can work with that.

    #3070114

    Hello-

    Ok, the first solution for the main sidebar worked- thank you!

    However, the CSS code for widening the content width for text and images didn’t seem to work quite right. (Perhaps input error on my behalf?)

    The other issue I am having right now is that the pop-up window for Mail Chimp is not working. I have it set so that it pops up after 5 seconds. Could you take a look at that and see if I made an error with the code?

    Lastly, I will create an unpublished page with a table as you suggested very soon. I’ll update you here when I complete that.

    Thank you,
    Gordon

    #3070131

    Sorry, on the width, there is another media query that I missed. Add this below the 850px media query I had given above.

    @media screen and (min-width: 1100px) {
      .content-wrapper.with-featured-image {
        margin-left: 0;
      }
      .content-wrapper .content-area {
        width: calc(100% - 280px)
      }
    }

    On the MailChimp popup, once you have dismissed that popup, a cookie is set in your browser that will let the system know that you have already dismissed it. Log out of WordPress.com, clear your browser cache and cookies, and then visit your site. I checked in Firefox, Chrome and Safari on my Mac, after clearing my cache and cookies on all three and I’m getting the MailChimp popup.

    #3070144

    Hi-

    Yes that did work! Ok- now another question… What is the pixel width from the left edge of content area to the right edge now that we have expanded it? Is it the 1100 pixels that is indicated in the CSS code above? When I find this out, I can effectively create a table for my images I want on the front page.

    Looking forward to your answer.

    Thank you very much!
    Gordon

    #3070145

    Oh and yes the Mail Chimp pop up does work!

    #3070147

    Yay on the popup!

    The width of the content area varies with the width of the screen/window width, so there isn’t a set width, and with tables, there are some limitations that can cause the view on a phone or small tablet to be less than optimal.

    I would suggest using divs with CSS class assigned to them and then we can control the number of things per line per row with Media Queries so that it looks good on all screens.

    I would suggest creating a draft page and then work on that until we get the layout the way you want it, and to work on all screens. This would be the basic structure. Don’t worry about the images sizes and such right now, we will create the CSS to fix that.

    <div class="home-img-wrapper">
    <div class="home-img">image 1 code here</div>
    <div class="home-img">image 2 code here</div>
    <div class="home-img">image 3 code here</div>
    ...
    </div>

    #3070157

    Ok… I created the draft page… It is titled “Div Class – Draft.”

    I’m not sure if the CSS code should have been put in the HTML area of the page, but I did.

    What I am looking for is to have 3 columns and 2 rows of images when someone visits the home page on a PC. However that translates when someone visits the home page on phones is another story…

    #3070158

    Meanwhile I threw in a table (3 columns x 2 rows) in the home page…

    #3070165

    It would be best if you inserted some images into those div tags so that I have something more concrete to work with. It would be best to include at least as many as you would like so that it fills out one row across. You can add more of the divs as needed with copy/paste and then replace “image 1 code here with the image code. I would suggest working and inserting the images from within the Text tab as it will be easier to make sure you are between the div tags.

    Let me know if you need help with any of that.

    #3070181

    Actually, it would be great to get some CSS modifications for the tables I have set up.

    I need to have the grey lines from the tables disappear at these pages:

    https://belgianbeerjournal.com/
    https://belgianbeerjournal.com/online-store/bottlebreacher/

    Plus, if I can get the CSS code for future pages that I place tables into. The div tags did not work for me. The tables were an easier solution for now.

    Let me know what you think!

    #3070182

    Hi there, this pretty much covers everything tables which might have a border line (table, the rows, and the cells).

    table, tr, td {
      border: none;
    }

The topic ‘Need some CSS modifications for the DEFAULT TEMPLATE in the Sela Theme’ is closed to new replies.