Forum Replies Created
-
Posts
-
I checked your site's CSS. The changes I suggested haven't been saved.
I assume you mean you want the page to appear like this?
Let me know if that's the case. Otherwise, I'm happy to help show you how to change the font size. But let's do one thing at a time.
Open your functions.php file.
Anywhere underneath:
//* Child theme (do not remove) define( 'CHILD_THEME_NAME', __( 'xxx' ) ); define( 'CHILD_THEME_URL', 'xxx' ); define( 'CHILD_THEME_VERSION', 'xxx' );Paste the following:
add_action( 'genesis_after_header', 'am_custom_header' ); function am_custom_header() { echo '<div id="custom-header-area" class="custom-header-area"><div class="wrap">'; genesis_widget_area( 'custom-header', array( 'before' => '<div class="custom-header"><div class="wrap">', 'after' => '</div></div>', ) ); echo '</div></div>'; } //* Register sidebar genesis_register_sidebar( array( 'id' => 'custom-header', 'name' => __( 'Custom Header', 'am'), 'description' => __( 'This is where you put any widgets you want to appear in your custom header', 'am' ), ) );
Your site isn't working at the moment.
Your two options are either reducing the font size or removing the widget area as you suggested.
However, simply removing the widget area will not remove the CSS that controls the spacing.
To do that, you need to change the code in your CSS file.
The two bits you need to change are:
Line 1271:
.site-header .widget-area { float: right; text-align: left; width: 728px; }Change that to:
.site-header .widget-area { display: none; visibility: hidden; }You then also need to change the following.
Line 1217
.site-header .title-area { float: left; padding-top: 30px; width: 380px; }to:
.site-header .title-area { float: left; padding-top: 30px; width: 100%; }That should allow you to achieve what you want.
Let me know if it worked.
I did manage to replicate it, but after scrolling even a pixel down, the issue resolved itself.
This suggests that it is likely a bug in Safari rather than something on StudioPress' end.
Most of the widgets appear to be there.
Can you post some of the code?
Thanks.
The problem is that .flexslider has a max-width of 920px.
I haven't used Genesis Responsive Slider for a long time – I tend to use Soliloquy – so I'm flying a little blind here.
Is there a setting in the Genesis menu that has the slider's width set to 920px?
Not a problem!
Anytime.
Hi,
In your CSS file, make these changes:
Line 1355:
.nav-primary { background:position; position: relative; width: 100%; z-index: 999; }In this, the position: fixed attribute was changed to relative.
You will also need to change another part of the CSS. It is coded with the fixed header in mind. Once you change it to relative, the extra padding needs to be removed.
That can be found on line 1132. Change it to the following.
.primary-nav .site-header { padding-top: 0; }That should solve your problem.
Making changes through the in built editor is a big no-no. If you screw up something, your site will go down and like Len said, you'll need to go in via FTP to fix it anyway.
However, even using FTP is a bad idea. You should never directly edit the live site's files.
I use version control. Chris Coyer has a great video on why you should and how to set it up. (His monologue on why you shouldn't be an FTP Cowboy is worth watching even if you don't plan on following his advice).
My work process is:
- Set up a local server using MAMP (I use a Mac – you'd use WAMP or similar on Windows).
- Install WordPress, Genesis and which ever theme I'm using (usually one of our own in-house themes).
- Make changes to the theme file, upload example content and test on the local server.
- When I'm happy with the site, I upload it to Beanstalk (private GitHub) via Tower which then deploys to the live server behind a login for client approval.
Beanstalk and Tower allow you to version control – make notes of why you did something and revert to earlier edits without needing to find out what broke the site. You simply click to deploy and you're back to a previous working version.
Version control becomes even more important when you have more than one person editing files – imagine spending hours making changes, only to have someone upload an older version of the site. It's an issue if you use the FTP approach.
Ah, I see. Yeah, I don't think there is a work around in that instance.
You'll have to edit them manually. You could also use ctrl+f if you're using a Windows PC or cmd+f if you're on a Mac, then search for font-size: to help highlight all the instances of font size, but it's still going to be manual.
It's not often that I say this, but if you don't know the first thing about websites, attempting to do anything with ecommerce on WordPress is a very bad idea.
You're better looking at something like Shopify or getting a professional to set it up for you.
They're not centered per-se on that blog.
Instead, it has quite a small width – about 700px wide.
You need to decide on how wide you want your site to be. Using that 700px width as an example, you'd need to go into your CSS file and find the following.
.site-title
.site-inner
.footer-widgets
.site-footerThen, between the parenthesis – the { } – you need to add the following (using site-title as an example).
.site-title { max-width: 700px; margin: 0 auto; }Specifically, it's the margin: 0 auto that centers it. But you need to define a width for it to work.
Word of warning though. Don't do it to the .site-container class.
Don't edit the baseline normalise section.
If your font-sizes also have a REM property, you could control it via the body.
Depending on the theme you are using, it might already have a property and value like this:
body { font-size: 62.5% /* Makes font size default 10px*/ }If so, changing that value would work.
A situation where I would use this is for responsive design where I want to reduce the text size down across the site when the screen width is under a certain size.
Can you post a link to the website? If you can, I can provide you with the answer and explain how it works.
That theme doesn't use column classes.
Though I can't be 100 per cent sure, it appears that each of those columns are two separate sidebars with widget areas wrapped in divs with a left and a right class.
I can tell you how to replicate it, but I need to know how comfortable are you with PHP and CSS.
Line 2105 –
.home-1, .home-2, .home-3, .home-4 { width: 210px; }There's your culprit. It appears the four home widgets resize to be inline with each other at 210px wide when the screen width is less than 1200px.
If you don't mind them being stacked on top of each other, regardless of screen size, simply change the value from 210px to 100%.
However. Including text as images is very bad practice. Google can't read it, and neither can people who rely on text-readers to navigate websites.
You would be better using a text widget with the
<blockquote></blockquote>property.
On the second part, you'd need to add a minimum-height property to the divs calling the background images. I think it's something like:
.home-odd .home-section-1, .home-odd .home-section-3, .home-odd .home-section-5 { property: value; }It might have .widget-area after those classes though.
Currently, they're set to auto, which means their height is proportional to the amount of content in the relevant sidebar.
As for your first question, I'm not sure if there is a function built in. If not, it would require some code adding to the functions.php folder.
How do you mean add an image?
Do you mean like it is set up on the theme demo? If so, follow these instructions:
http://my.studiopress.com/setup/centric-pro-theme/#step-11If you just want an image, you can use a text widget and the following code:
src is the location of the image, so if you've uploaded it via the media uploader, click and copy the image location on the right. Remove the # from between the quote marks and paste it.
For SEO and accessibility purposes, make sure you add a description for the image. Remove the ### from between the quote marks in alt="" and replace it with your description.
Otherwise, you can download an image widget such as Image Widget.
Thanks Dave.
It wasn't presenting on my main computer. Turns out it was an issue on 16:10 ratio monitors.
I've implemented z-index and position to fix it.
Also just adding some retina specific media queries to remove the videos on mobile devices.