Ask Other GeneratePress-Users How They Customize Their Sites

[Dee Broughton]

Tom has set up a “Want Your Site Showcased?” topic and I love seeing all the sites and people’s ideas, but I found I kept wanting to ask them HOW they did that cool thing they did with GeneratePress.

I asked Tom for a place where we could appropriately talk to each other about our sites without interfering with his support for other users. Tom said start a topic so here it is. 🙂

[Dee Broughton]

Carlos asked:

@Dee Broughton:

Launched two new sites today that I am very happy with. Thank you, GeneratePress (Tom)!

http://austinbabyguru.com/

http://altavistarecording.com/

This is the first time I’ve customized the mobile view. I’m very happy with both.

I totally love the mobile menu floating up there on the left.
Is it something that somebody with zero knowing (me) is able to do? Is it a plugin?

Thank you

[Dee Broughton]

Carlos –

I don’t know if you could do it with “zero,” but I can walk you through what I did. 🙂 It’s not a plugin. It’s done with CSS. There may be a plugin (seems there is for everything), but I tend to do most things with CSS on my sites. Some of this could probably be handled inside the regular options for GeneratePress but when I was working it out, there were fewer options.

If you don’t know what CSS is yet, it’s worth finding out. For now, let’s just say it’s the code you put in a style sheet for your site. You do need a plugin to do that with GeneratePress. I use Simple Custom CSS as recommended by Tom and it works great. Install that first. Then go to Appearance/Custom CSS and you’ll see where you’ll be adding the lines below. You can just paste it in and customize the colors and position, if you want to.

What you are doing here is setting up a style area for what happens when the screen size is smaller and then styling 3 things: the hotdog button, the menu that drops down out of the hotdog, the word Menu that labels the hotdog.

This is only for one main navigation menu. I’ve hidden secondary menus on these sites because I don’t think 2 menus looks good on the phone. In my sites, there is also code to change the header and various other parts, but below is just the menu part that you mentioned. This one is from http://altavistarecording.com/

Instead of explaining each step, I’ve commented on the code below with comment marks /* */

/*media view for mobiles less than 768*/
@media screen and ( max-width: 768px ) {
 
/*styling the hotdog*/
  
  .menu-toggle {

    font-size: 16px !important;
    padding-left: 12px;
    padding-right: 6px;
    box-shadow: 1px 1px 4px #111;
    text-align: left !important;
    z-index: 99999;
    position:fixed; 
    left:0; 
/*change position of hotdog here*/  
    top: 12% !important;

/*change color of hotdog background here first 3 numbers are color last number is transparency */
    background: rgba(103,13,4,1);
  }

 /*what happens when you hover over hotdog mine changes the shadow and moves slightly*/ 
  .menu-toggle:hover {left:2px;box-shadow: 2px 2px 6px #111;}
  
 
/*drop down out of hotdog*/
 .main-nav {

    background: rgba(12,9,4,1); /*change color of background here */

    display: block!important; 
    position:fixed;
 
    left:0; top: 12% !important; /*change position here*/
 
    padding-left: -11px !important;
    padding-right: 18px !important;
    padding-top: 35px !important;
    box-shadow: 1px 1px 3px #000;	

}

 /*words on dropdown*/

 .main-navigation a {
    font-size: 14px !important;
    padding-left: 12px !important;
  }

  /*if site has a secondary menu that should not be displayed in mobile view*/
 .secondary-navigation {display:none !important;}
  .secondary-navigation .menu-toggle {display:none !important;}

} /*end small media----*/

If you want to hide the menu label as it is on http://austinbabyguru.com/, add this

.menu-toggle .mobile-menu {
      display: none;
}

[Carlos Paramio]

Awesome Dee, big thanks.

I said ‘zero’ knowing but meant close-to-zero, hehe. Already got Simple Custom CSS for last week (thanks for the recommendation, Tom) and have been playing with it since.

Anyway, this step by step explanation will help others too.

The code works perfectly, it’s great.

[Dee Broughton]

Carlos –

Yeah, I saw later from your other questions that you know quite a bit. 🙂

Absolutely use hex. I only use rgb when I want to also use transparency. Just use something like

background: #D54E21;

for the shape and

color: #D54E21;

for text.

[Carlos Paramio]

haha you were so fast that caught my post before the editing.

I found a file in the server of our company with the RGB codes for corporate colors, and didn’t dislike using them as I did at first sight.

Hoewer I prefer using HEX because I know them by heart.

Thanks for the extra clue Dee

[Dee Broughton]

Carlos, if you haven’t discovered Colorzilla, DO. http://www.colorzilla.com/ It’s an awesome tool.

[Carlos Paramio]

I didn’t knew that tool, awesome!

I don’t want to bother you, but I’m playing with the code you gave me and haven’t found a solution:
-Any idea why the “Entry Meta Text” is visible through the menu (between Twitter and Facebook links)? If menu is collapsed those icons aren’t visible.
-I’ve made the hot dog wider but I don’t know how to move to the right the arrows for opening the submenu options. I’ve tried with Element Spacing->Primary Menu Items without luck

[Dee Broughton]

Carlos –

I didn’t have the entry/meta issue, possibly because I had them hidden already for other reasons. You might play with putting something like this.

.entry-meta, .comment-metadata {display:none !important;}

If you put it in the small media area, but you want it otherwise, you may need to “turn it back on” outside that area.

As for the arrows, I’d play with adding padding to the dropdown toggle.

.dropdown-toggle {padding...

My thoughts but Tom will tell you the right way. 🙂

[Dee Broughton]

Hi, GP fans –

I’m trying out a a new design idea and I’m really not sure it works. Anyone want to give feedback?
There’s no mobile version yet, so only looking at desktop view.
http://goodwriting.guru/ – Sandbox domain

Compared to old site
http://www.deebroughton.com/

[Kathryn Doherty]

Hi,
I’m just getting started and getting my head around all of this, but seem to have hit a wall with trying to add an author box on my home page. I want it to look something like one of these, where there is an image and a small amount of text:
http://www.twopeasandtheirpod.com/
http://picky-palate.com/
http://www.gimmesomeoven.com/ (scroll down, see far right side)
I can’t seem to find a widget that will work and none of the built-in tools seem to pull it all together. Is there a Generate Press add-on that will allow me to do something like this? Other tools or ideas?
Thanks for any help!
~ Kathryn

[Dee Broughton]

Kathryn –

I may be missing what you are wanting, but I don’t see any different functionality needed for the author box, so I would just use a text widget and put whatever I wanted in it, styling it with div classes, then I’d probably also style the individual widget to have no background, padding, or margins.

Picky Palate doesn’t even do that as far I see on the front page. It just puts a centered image and some text in the sidebar.

Dee

[Kathryn Doherty]

Thanks Dee! That was really helpful. And after a beginner HTML and beginner CSS run-through, I’ve got my head around this a little better.
However, I can’t figure out how to use the CSS in my Admin to only apply to the text widget I’m using in the sidebar. What’s the best way to link those?
Thanks again for the help, I really appreciate it!
~ Kathryn

[Dee Broughton]

Kathryn –

You have to get the widget ID. To do this in Firefox, view the site, right click on the widget, click on Inspect Element on the right-click menu. A few lines above the highlighted one, you’ll see some text that gives you the widget ID.

For example, on mine, one of them says

<aside id="text-11" class="widget inner-padding widget_text">

So, that widget is #text-11. To style it, I’d put this in my CSS to make a widget that takes up the whole space available. You can see an example of how I’ve used that on the book covers on http://www.dbepub.com

#text-11 {
background: transparent !important;
margin: 0,0,20px,0 !important;
padding: 0 !important;
}

I use Simple Custom CSS as Tom recommends it with GP. Some coders will say use the extra tag below to show which sidebar it is, but Tom says it’s not needed.

#left-sidebar  #text-11 {
}

You may not need all those !importants and experienced coders would disapprove, but I still use them more than I should. 🙂

Cheers

[Dee Broughton]

Oops, sorry, those commas are wrong.

#text-11 {
background: transparent !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
}

You can do it better than that, but I use all places if I think I might change one later.

[Author]

Posts