Altitude Pro Theme Customization

[bradnolan]

Hi!

What I am trying to accomplish is a bit of moving around. In the Altitude Pro theme, the home page is a series of 100% sections. I would like to make a few of those side by side instead of on top of each other. For example:

I would love to make the "Brad and Heather" section to the left of the "Enterprise" section 50/50 (The kicker being that when on mobile they are stacked again).

Another thing I would like to accomplish is swapping the after entry widget location and the author box location with each other. I just need a point in the right directions. I know just enough to get in trouble.

http://bradnolan.com

[Brad Dalton]

You could use split widgets or add the HTML for content columns.

---

Tutorials for StudioPress Themes.

[bradnolan]

I love the widgets and their backgrounds. I would love to turn to into a four widget grid (and stacked the way it is now on mobile). Is split widgets the solution? If so, I'll start googling.

[Brad Dalton]

1. You can use the Genesis featured posts widget to display 4 featured images inline using the correct CSS.

2. You could also create 4 widgets inline

3. Or you could use Column classes HTML inside the widgets

4. Or use the column class with 4 widgets.

5. You could also use CSS to display content in a grid and there's many ways to do this using CSS.

---

Tutorials for StudioPress Themes.

[bradnolan]

Ok. I will have to do some research and self teach I think. What I am going for:

Take the existing 6 widget areas and make them a two column 3 row grid instead of stacked (keeping them stacked on mobile). I almost have it hacked together with CSS. Inline might be what I am missing on that.

(A good example of the side by side style I mean can be found at CopyBlogger.com - the rainmaker/synthesis section)

I don't want columns inside the widget areas. I want the widget areas themselves to be a grid. I'm also having an issue with the navigation. I want to create basically an exact copy of the studiopress.com mobile navigation, but I can create a separate topic for that.

[bradnolan]

Hey Brad!

I looked at your split widgets code. Thank you. I am just wondering how to (instead of applying that to the after post concept) apply it to the existing widgets on the home page. I am obviously inexperienced and terrified of PHP. Please let me know if there is any guidance there.

Might become a member at your site too. Thanks!

[Brad Dalton]

You could swap out the code and make each widget area 50/50 using the split widgets code.

---

Tutorials for StudioPress Themes.

[jbendiner]

Hey Brad
I love the visuals of your individual pages with their margins, such as 'conect-with-brad'.
Where in the code did you do that?
Thanks,
Jerry

[bradnolan]

Hey Brad
I love the visuals of your individual pages with their margins, such as ‘conect-with-brad’.
Where in the code did you do that?

Hey Jerry,

The Connect page is just a full width page. Please note! I am not a designer, and made these mods after some trial, error, and ugliness. I'm self taught when it comes to CSS, so I likely did things wrong.

I made some modifications to the .site-inner:

.site-inner {
    background-color: #ECF0F1;
    clear: both;
    margin-top: 170px;
    position: relative;
    z-index: 9;
}

Also made some mods to .entry:

.entry {
    margin-bottom: 0rem;
    border: 1px solid #BDC3C7;
    padding: 2rem;
    background-color: #FFF;
}

[jbendiner]

Thank you!
This will help a lot.

By the way, we seem to have graduated from the same CSS school !!!

[Author]

Posts