-
Search Results
-
Topic: Metro – 3 Nagging Questions
Hi folks, I'm hoping someone can help me with a few Metro questions that I can't seem to find the answer to. Unfortunately the site is in development so I can't share the link, but any help would be most appreciated.
1. I want to position a 728x90 ad in the header to the right of a 270x90 logo. However, the header-right widget area is too small and cuts off the ad. I tried adjusting the #header and #widget-area properties in the theme's css but it had zero effect. Would someone be able to provide the exact code/adjustments needed to make the ad sit snugly to the right of the logo?
2. I'm also trying to position/wrap the post titles and post meta information on the homepage (not single page) to the right of the respective post thumbnails. Currently, they sit above the image, but I'd prefer them to be positioned like they are in the "Featured Bottom Widget" (i.e. to the right of the image and just above the excerpt), which I'm unable to use as our client requires the page navigation which disappears when using the content area widgets.
3. Finally, how can I adjust the width of the Metro theme? I'd like the main content area to be 650px and the sidebar 300px. Where in the code can I make this adjustment?
Thanks in advance for help with the above.
I have to set the record straight because this is something that was one of the very first things I started working on this site, but I keep postponing because it's just caused so much trouble.
I've built many sites, 6 of them using Genesis with child themes such as Minimum old, Minimum New, Agency, Clip-Cart and Crystal. I have never had so much trouble adding a proper clickable home logo as I have with Minimum. I'm a graphic designer, no a coder, but I usually do OK with CSS and PHP even though it's not my forte.
I'm sorry, but the tutorial's suggested process of uploading the image via WordPress' Header Image UI is just not good enough. If it's 1140, transparent with the logo in the corner, it looks like crap mobile. If you change the dimensions in functions.php and upload the logo in that newly set size, then it gets centered and breaks the menu. I've searched throughout this forum and there are constant complains that this either doesn't work, breaks the menu, is not clickable, it's impossible to hide the Site Name and Description Text without breaking the layout, etc, etc, etc.
I personally am having the problem that if I hide the header text in the WordPress header interface, the entire layout of my site moves down about 40px making the top header area much taller. This has been happening since day one, even before all my customizations. So, I know it wasn't me that broke it.
If I show the header text, then the layout is fine. But of course, the header text then shows right smack over my logo.
I've tried loading the logo as a 1140px transparent banner with the logo on one end (1140). That looks good, UNTIL you are on a mobile device. And like I said above, I also tried changing the dimensions in functions.php to 280x40, but that displays the logo center, not clickable and also breaks the menu. I've gotten to the conclusion that expecting the WordPress Header Image interface to work with Minimum is simple not going to cut it. So, I'm trying CSS only now… (going back to what I was trying a few weeks ago).
The latest thing I have tried is what's explained in this locked thread:
He doesn't specify how he made it transparent, or how he made the text the same size of the logo, or whether it was vice versa… So I tried using display: none; but doesn't work because it hides both the logo text and the logo image. Then I tried using opacity: 0 in #title a:hover. That seems to have worked, but of course, that doesn't work in IE, - seems to only work in Firefox, Chrome and Safari. PLUS, it looks huge in mobile, and still touches the menu items below it.
Could someone PLEASE help me debug this thing. PLEASE, PLEASE, PLEASE
This is the development site: http://rightisbackside.com
I keep putting this off and working on other parts of the site, but I'm almost done and I need to fix this. I'm super frustrated and can't believe how problematic it has been to simply add a working clickable logo to Minimum that also works well mobile. I like everything else about this theme, but this feature has really put me off. This has never been a problem with any of your other themes I have used. At times, I've considered moving over to Metro or Modern Portfolio, but I've put so much work into this one that it'd be a waste to move to something else now.
Below is my current CSS showing how I'm adding the logo to the header (see #title-area). The logo is 280 x 40px. The #title a, #title a:hover shows the rule opacity:0 that I added in an attempt to hide the logo text. Note, I can't simply turn it off in the WP Header pane. Like I said above, it throws my layout down by 40px, give or take. And It also renders the logo image unclickable.
If you look at the site in Chrome, Firefox or Safari, it looks good and it works. But in IE it doesn't work and in mobile it looks wrong too. I'm not going to touch this CSS for a few hours to give some time to someone to please look at it as it is now.
-Danny
/* Header
------------------------------------------------------------ */#header {
background-position: top center!important;
margin: 0 auto;
min-height: 60px;
overflow: hidden;
width: 1140px;
}#title-area {
float: left;
overflow: hidden;
width: 35%;
background: url("images/logo.png") no-repeat scroll 5px 10px transparent;
}#title {
font-family: 'Open Sans', sans-serif;
font-size: 30px;
font-weight: 700;
line-height: 1;
margin: 15px 0 10px;
text-transform: uppercase;
}#title a,
#title a:hover {
color: #333333;
text-decoration: none;
opacity: 0
}#description {
display: none;
}#header .widget-area {
float: right;
width: 65%;
}
/* Image Header - Partial Width
------------------------------------------------------------ */.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 100px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 400px;
}.header-image #description {
display: block;
overflow: hidden;
}
/* Image Header - Full Width
------------------------------------------------------------ */.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
width: 100%;
}Hello, my site is http://bwhli.com
I'm trying to style the blogroll title in my footer. As you can see, all the other widget titles in the footer and sidebar have a white background behind them. The striped pattern for all other titles except blogroll are also slightly thinner. I tried to find the right element to style with Firebug, but I haven't been able to find it.
Thanks!
I need help with a widget title issue that I am having. I have added two different plugins (Testimonials by Woo Themes and Soliloquy slider) and when I add a title to the widget it is outputting this using the Metro theme:
<span class="widget-headline">Featured</span>
It seems like the plugin's span class rule is being overwritten by the themes span class rule and because of that it sees all the code for the title as text. I'm not sure how to fix this and wanted to know if anyone else has dealt with this and has a fix? I don't have a link to share as this site is a tester site right now.Thanks for the help!
Tyy
(for beginners)
I just figured out how to change the color options for the metro theme. I'm new to this, so hopefully it help others like me. If you are more experienced, please feel free to correct any of this!
1. go to appearance/themes/editor. select metro themes. go to section 13.
2. choose which color you'd like to overwrite. I chose red to change to safety orange.
3. change the color in bold to the color of your choice. update file.
4. choose the color that you overwrote in genesis/theme settings/color style
example of the code after I changed it (bold is all I changed):
/* 13d - Metro Red ----------- */
.metro-red a,
.metro-red .genesis-nav-menu li.right a:hover,
.metro-red #footer a:hover,
.metro-red #subnav .subnav-left a:hover {
color: #cc6600;
}.metro-red a:hover,
.metro-red .post-info a:hover,
.metro-red .post-meta a:hover {
color: #222;
}.metro-red .post-info a,
.metro-red .post-meta a {
color: #999;
}.metro-red a.social-buttons,
.metro-red .genesis-nav-menu a,
.metro-red .post-comments a {
color: #fff;
}.metro-red h2 a,
.metro-red h2 a:visited {
color: #333;
}.metro-red h2 a:hover {
color: #cc6600;
}.metro-red a.social-buttons:hover,
.metro-red button:hover,
.metro-red input:hover[type="button"],
.metro-red input:hover[type="submit"],
.metro-red .btn:hover,
.metro-red .genesis-nav-menu .current-menu-item a,
.metro-red .genesis-nav-menu li a:hover,
.metro-red .genesis-nav-menu li:hover a,
.metro-red .navigation li a:hover,
.metro-red .navigation li.active a,
.metro-red .post-comments a,
.metro-red .sidebar .enews-widget input[type="submit"],
.metro-red #title a {
background-color: #cc6600;
}.metro-red .genesis-nav-menu li li a,
.metro-red .genesis-nav-menu li li a:link,
.metro-red .genesis-nav-menu li li a:visited,
.metro-red .post-comments a:hover {
background-color: #333;
}.metro-red .genesis-nav-menu li li a:hover {
background-color: #cc6600;
}.metro-red .sidebar .enews-widget input:hover[type="submit"] {
background-color: #fff;
}I also tried to add an additional theme color as shown below so that the name and color would be the same (rather than calling it red, but changing to safety orange. I thought the options in genesis/theme settings/color style would update to show the new color, but no such luck. If anyone knows how to show all the options, let me know!
Topic: Genesis Foundry
I needed a quick landing page and wanted to take a look behind the scenes at Metro - so killed two birds with one stone... ta-da!
Just made a few minor changes to the landing page template, put header back in, tweaked some colors, edited some spacing and added a sign-up widget to utilize Kraft's Genesis Enews Extended plugin.
Also - if you have any feedback for the project itself (especially if you have something you'd like to see on the site) - i'm all ears.
I'll update this post when I've got my full test site ready for viewing as well.
Cheers,
JT
Email – jtwerdy [at] gmail [dot] com / Twitter – @MorningRage
WordPress & Genesis Developer – http://genesistweaks.com
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.