Logo Placement, Font, Right Widgets, Contact Us

Support Area Forums Foxy Logo Placement, Font, Right Widgets, Contact Us

Viewing 10 posts - 1 through 10 (of 10 total)
URL to the page in question:
  • Author
    Posts
  • #6170
    Jeremy Mandell
    Participant

    Bill,

    First of all. Using Foxy and we love the theme. From what we’ve seen, we are also very impressed with the customer support. Many of my questions have been answered through reading the previous posts, and we’re hoping you will be able to answer a few more directly. We’re trying to do a few things, and quite frankly, we are very new to this.

    The things we need to do are:
    Justify Logo to left- I’ve messed around with the sizing using different forums of yours, but it’s a bit too much to the right. We’d like it to be justified inline with the tabs

    Use Fontific to change Font of the Theme… so far it has only worked to change the color. Is there something else we need to add so it will work on everything? What are the titles I would need to add? All I know of is body, and it didn’t seem to change the font…

    Can we have a Twitter widget on the right of the homepage?

    Also, we want to include a trendy new or better looking contact page
    -Include Google Map for current Location

    Our website is http://www.crackedtrucks.com

    Thanks!

    Jeremy

    #6180
    Bill Robbins
    Moderator

    Jeremy,

    Thank you for your business first of all. Let me see if I can answer your questions:

    Logo
    Sometimes there is a bit of empty space at the edges of a graphic logo and that can push the visible part out of alignment. Here’s how to move your logo over just a bit:

    1. Go to the theme options page and select the styling tab.
    2. At the top of the tab, choose “yes” to include custom styling.
    3. Scroll down to the bottom until you see a box labeled “Custom CSS and paste this into that box:
      
      #logo {
      	margin-left: -20px;
      }
      
    4. Update your settings.

    That should move your logo over just a bit to line it up.


    Fontific
    Great plugin, but can be tricky to use sometimes. In many cases “body” would work great. I have a lot of the individual elements specified because some plugins target them specifically which can alter the styling in unfortunate ways.

    For the “paragraph” or body level elements, use this to target them:

    
    p, li, ol, ul, span, div, label, legend, form, fieldset, input, ul li, ol, li
    

    For widget titles use this:

    
     h4.widget-title
    

    For the main title on a page, use this:

    
    h1.title, h2.title
    

    And for the navigation menu items, use this:

    
    aside.sidebar nav a, aside.sidebar nav a:visited 
    

    If there are any other bits of text you’d like to change, just let me know.


    Twitter Widget
    You can add a Twitter widget to the right with just a bit of editing. Here’s how to do that:

    1. Go to the appearance section and select edit to open up the theme editor.
    2. From the list of files on your right, choose functions.php and look for this spot:
      
      		register_sidebar( array(
      			'name' => __('Page Sidebar', 'organizedthemes'),
      			'id'   =>  'sidebar-page',
      			'description' => __('This sidebar is used only on static pages.', 'organizedthemes'),
      			'before_widget' => '
      ', 'after_widget' => '
      ', 'before_title' => '

      ', 'after_title' => '

      ' ) );

      Just above that paste this:

      
      		register_sidebar( array(
      			'name' => __('Twitter Sidebar', 'organizedthemes'),
      			'id'   =>  'sidebar-twitter',
      			'description' => __('This sidebar is for our most recent Tweets.', 'organizedthemes'),
      			'before_widget' => '
      ', 'after_widget' => '
      ', 'before_title' => '

      ', 'after_title' => '

      ' ) );
    3. Save your changes.
    4. Next open up footer.php. Just above where it says:
      
      <?php wp_footer(); ?>
      

      Paste this:

    5. Save your changes.
    6. Last file, edit style.css and scroll down to the very bottom and paste this:
      
      .twitter-sidebar {
      	position: absolute;
      	top: 152px;
      	right: 0;
      	width: 180px;
      	padding: 10px;
      	background-color: rgba(0, 0, 0, 0.84);
      }
      
      @media only screen and (max-width: 1080px) {
      
      	.twitter-sidebar {
      		display: none;
      	}
      }
      
    7. Save your changes.

    That will add a new sidebar that you can use really for anything, but would work for a Twitter widget. It’s also set to hide on mobile browsers as there really isn’t enough width for everything to fit.


    Contact Page
    I’ve actually been thinking about making a theme for food trucks in particular because of the changing locations. I may still do that this summer.

    The easiest thing to do would be to use a plugin like MapPress Easy Google Maps. That would give you an interface inside of WordPress that you can use to update your location.

    You could also create custom maps at maps.google.com and save them inside your account. Then you can swap them out by pasting the embed code for that day’s map into your site.

    It is also possible to swap out the maps automatically based on the day of the week, but that’s quite a bit more complicated and would require a pretty fair amount of custom programming.


    I hope that helps you out. If you have any other questions, please feel free to ask.

    Thanks again and have a great week,
    Bill

    #6187
    Jeremy Mandell
    Participant

    Bill,

    First, thank you so much. You are a terrific help. I could not do this without you!

    Few things. To start, fonts. If you would be able to help me with the name of the selector for the Staff Titles and such? That’s how we’re organizing our menu. It can be found on our site under “Menu” and then click any of the three sub categories. Next, with the contact page, because of changing the font to white, the white background in my plugin (Custom Contact Forms) makes it so you can’t read the fields. I was wondering, instead of changing those fonts, if there is a way of changing the background of that page from white to a translucent?

    Back to the Menu (using the staff pages, how do I add a photo with the excerpts? So before clicking the “Goy Veh” for example, how would I place a picture to the left of it?
    Another thing, when you click “Menu” it is simply an empty page. Can I add mini pages, or links, on that page with “Sandwiches,” “Sides,” and “Beverages” which also have a picture?

    Something new, the Left hand Sidebar. Can we move it more to the left when the window is bigger? It seems to float somewhat closer to the middle.

    And the Twitter sidebar looks great! We might want to also move it down a bit inline with the other sidebar and possibly to the left. Can you point me in the right direction to toggle with those settings?

    Also, anyway to add a banner underneath the logo and in between home when someone presses the home page? As of now we aren’t even able to add anything to the homepage…

    Everything else works great. The Logo, Font, Twitter and Google Maps are working out well.

    #6188
    Jeremy Mandell
    Participant

    And one more thing. I noticed, if you hover over “Menu” and click any of the items, after the page loads, if you hover over “Menu” again the item you clicked will be a white box. How do I fix that?

    Thanks,

    Jeremy

    #6215
    Bill Robbins
    Moderator

    Jeremy,

    I’m always glad to help. During the summer helping is a bit interesting with my three small kids out of school. You’ve got to be flexible to own a business.

    Let me see if I can answer your questions:

    Staff Title Selector
    The selector for the staff titles is

    
    .staff-list article h4
    

    Staff Images
    The images are the “featured image” of that staff member. To add a featured image, upload your picture on the staff member you’d like to use it on. Once the upload finishes, click the “use as featured image” link and your picture will now appear in the listing. There’s a video on using featured images in our video section that can walk you through that too.


    Contact Background
    If you’d like to make the background of the contact form itself the same color as the page background, you can paste this at the bottom of your style.css file:

    
    form#form-2-1338396662 {
    	background: transparent;
    }
    
    form#form-2-1338396662 input {
    	color: #000 !important;
    }
    

    That will make this particular form have a transparent background.


    Twitter Widget
    In the code for the Twitter widget above, change this:

    
    top: 152px;
    

    to this:

    
    top: 210px;
    

    That should even things out. You can adjust the top value to change it’s placement. If you’d like to move it off the right hand edge a bit, you can change this:

    
    right: 0;
    

    to

    
    right: 10px;
    

    That will give you a bit of space on the right.


    Menu Page

    Probably the easiest way would be to add several images to your page, one for each menu section that are set to link to that page in your site. Go to the menu page and upload the first image you’d like to use. Depending on the look you’re going for you could either use a medium sized image or one that spans the width of the page. Add a caption and in the field that says “Image links to” enter the URL that you’d like that image to go to. If you’re using a medium size image, set it to be left aligned. Repeat that for your other images. You could do that to create a directory of sorts for your menu.


    Home Page Banner
    Probably the easiest option here would be to switch from the “blank” template for your home page to the default one. You can then upload an image on that page to serve as your banner. If you do that, you can add this to the bottom of your style.css file too. It will hide the page title for you:

    
    .home h2.title {
    	display: none;
    }
    
    .home .page-content {
    	padding: 5px;
    }
    

    Navigation Color
    If I’m understanding, you don’t want the curent menu item to be highlighted if it’s a sub menu item? If that’s the case, paste this at the bottom of your style.css too:

    
    aside.sidebar nav li li.current-menu-item a {
    	color: #fff;
    	background-color: rgba(0, 0, 0, 0.84) !important;
    }
    

    I hope that helps out. If you have other questions (or I missed one), let me know,
    Bill

    #6259
    Jeremy Mandell
    Participant

    Bill,

    I definitely understand the need for flexibility. First off. Thank you so much. You are a saint. We wouldn’t be anywhere without you. Now, to the corrections. I changed what I could. Most things worked, but some brought up new questions.

    To start, referring to our background. We want to avoid the images in the background from distorting when the user changes his screen size. Can we make the background static so that the images stay, but make the user scroll. Or use a zoomed image that the user only sees a part of if their screen isn’t full? Maybe this can fix our iPad problem too?

    Now that I know how to move the twitter app, how can I move the left side bar closer to the left? I feel like its too far out? With that, how can I move the logo to the left to move with it?

    Fontific
    – What’s the font selector for when are looking at the sandwich’s page (staff information title)

    Contact Page
    – Okay, I updated the Contact Page, but now when you fill out the form you can’t see what you’re writing because it’s white. Can we either make just that font black, or make the background different?

    Navigation Color
    -Still having a similar problem with the highlighting. If you select “Menu” wait for the page to load and hover over “Menu” on this reloaded page, all the options are highlighted and you cannot see them

    Menu Page (and Beverages)
    -As for the “Menu” Page, using your help to have the pictures link to the pages. It looks great. Thanks. Can we then center those photos? So the lip on the right is even to the shoulder on the left? (www.crackedtrucks.com/menu-2)

    Thank again.

    Jeremy

    #6296
    Bill Robbins
    Moderator

    Sorry for the delay. We’ve just returned from New Orleans celebrating our anniversary and it’s taken me just a while to catch up.

    Sandwich menu titles
    The selector you’ll want to use in Fontific for these is this:

    
    .staff-list article h4
    

    That should let you change the “staff” section titles.


    Contact Form
    Let’s try this for the contact form input.

    
    form.customcontactform input {
    	color: #000 !important;
    }
    

    That should work even if you end up adding another form in the future too.


    Sub-menu items
    That seems to be a bug that happens with a custom menu color. Here’s how you can fix it:

    
    .current-menu-item ul.sub-menu li a {
    	color: #fff !important;
    	background-color: transparent;
    	background-color: rgba(0, 0, 0, 0.84) !important;
    }
    
    .current-menu-item ul.sub-menu li a:hover {
    	color: #000 !important;
    	background-color: #fff !important;
    }
    

    Center Images
    You can use this to center the images. This will only affect that page.

    
    .page-id-73 .page-content .wp-caption {
    	margin-right: 11px;
    	margin-left: 11px;
    }
    

    Move Over Navigation/Logo
    This CSS snippet will make the content area wider on larger screens. That will move the navigation and logo further to the left and also the main content area a bit to the right.

    
    @media only screen and (min-width: 1300px) {
    	
    	.wrap,
    	.header-content {
    		width: 1200px;
    	}
    	
    }
    
    
    
    Background You can set a static background image if you'd like to. The trade off would be not having a background slideshow or being able to set a different image for various parts of the site. Here's what you'd want to do: Paste this CSS snippet at the bottom of your style.css file:
    
    #supersized,
    #supersized-loader {
    	display: none !important;
    }
    

    That will hide the slideshow (make sure you don't have any images loaded in that section of the theme options page too).

    Next go to the media section and select the image you'd like to use. If you'll edit the image, WordPress will give you the URL to that image. Copy that URL. Next paste this at the bottom of your style.css file:

    
    body {
    	background: url(https://yoursite.com/image.jpg) no-repeat fixed center center;
    }
    

    You'll need to replace the http://yoursite.com/image.jpg with the URL to your image.

    Then save your changes. That will give you a static image to work with.


    If you need any help, let me know.

    Take care,
    Bill

    #6306
    Jeremy Mandell
    Participant

    Bill,

    A Few Things:

    Sandwich Menu Titles: (http://crackedtrucks.com/staff/the-morning-bender/) This is what I am talking about. I already used that font selector for the titles, but the heading is still off.

    Contact Form Worked. Thanks.

    Centering the Images worked great on the “Menu” page… How about on the Beverage page (http://crackedtrucks.com/beverages-2/)? What is that page ID?

    And as for the rest of the code to get rid of the slideshow. I tried it, but it just looks too zoomed in, and to be honest, the first bit with “@media…” did the trick.

    Thanks,

    Jeremy

    #6311
    Bill Robbins
    Moderator

    Jeremy,

    Gotcha. I wasn’t looking an the individual sandwiches. Here’s what you’ll need to get those:

    
    article h1, 
    h2.title, 
    .page-content h1, 
    h1.page-title
    

    For the beverages, since the one on the right isn’t the same dimensions as the other two, let’s use this:

    
    .page-id-697 .page-content .wp-caption {
    	margin-right: 18px;
    	margin-left: 18px;
    }
    

    See if that doesn’t help things out. Let me know if you need anything else,
    Bill

    #6371
    Jeremy Mandell
    Participant

    Perfect. Thanks

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Logo Placement, Font, Right Widgets, Contact Us’ is closed to new replies.