Forum Replies Created
-
AuthorPosts
-
April 6, 2013 at 11:01 am in reply to: How do you create a generic template page for eleven40? #33498ramseypMember
Apologies, the page template should contain ( besides the opening php tag and the comment block with the template name in it):
remove_action( 'genesis_loop','genesis_do_loop' );
add_action( 'genesis_loop','my_custom_loop' );
function my_custom_loop() {
$args = array(
'posts_per_page' => 5,
'post_status' => 'publish',
);
genesis_custom_loop( $args );
}
genesis();
April 6, 2013 at 9:12 am in reply to: How do I create a dark-colored "frame" to surround text on a light background? #33474ramseypMemberEd,
The Media Funhouse site's "dark frame" is actually a dark background color. What sets it off is that the page also has a white background color behind the content. You can achieve this by adding these lines to the tail end of your style.css:
body: { background-color: #2d3037; }
#content: { -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px; background: #fff; }
#title a,#title a:visited,.genesis-nav-menu a, .navigation li a, .widgettitle a, $footer p {
color: #fff;
}That will place the content behind a white background & the rest of the page will have a dark background. The header, navigation and footer text will be white, as well.
Cheers!
Pat
April 6, 2013 at 8:58 am in reply to: How do you create a generic template page for eleven40? #33469ramseypMemberHi there,
First thing you need to do is redo the code you have in the template. Since you're using a Genesis child theme, the page template needs to become part of the Genesis environment. Redo you template to read like this:
<?php
/**
* Template Name: Thank You Page - Email
*
*/genesis();
That right there will make it a working page template and make it part of the genesis environment.
The second part you mention would involve replacing the standard post content functionality with a custom loop. With Genesis, you add or remove actions (functions) to manipulate the output. If you're not familiar with Nick's Genesis Framework overview, start here.
You would want this in your page template, before the genesis(); bit:
remove_action( 'genesis_loop','genesis_do_loop' );
This unhooks the default loop of that page so you can replace it with a custom one that grabs the 5 posts:
add_action( 'genesis_loop','my_custom_loop' );
Now we replace genesis_do_loop with our own function, my_custom_loop where the custom loop will go. We have to create this function before it can do anything.
function my_custom_loop() {
}
Between these brackets, { and }, we write what the function should do. You want the 5 latest Posts, so something like this would work:
function my_custom_content() {
$args = array(
'posts_per_page' => 5,
'post_status' => 'publish',
);
genesis_custom_loop( $args );
}The finished page template would look something like:
5,
'post_status' => 'publish',
);
genesis_custom_loop( $args );
}remove_action( 'genesis_loop','genesis_do_loop' );
add_action( 'genesis_loop','my_custom_loop' );genesis();
ramseypMemberCharlie,
The issue looks like one of "height". Some of your Featured Posts have a 2-line title, while others just 1. This uncertainty over how tall a featured post can be is causing the un-even rows. What I would try is to set a min-height rule in your CSS. Your tallest Featured Posts are about 338 pixels in height. I always add roughly 20 pixels to that to account for longer post bodies/excerpts/titles.
In your theme's style.css, you can add this:
.featuredpost { min-height: 358px; }
and you should see the grid stay together.
ramseypMemberIf you want the image just behind the #content div, you would change that line to read:
body.jeffrey #content {
background: url(images/Blue-Prints-in-Addison-670pxwide.jpg) left top no-repeat;
}You can insure the image covers the whole space by using the background-size attribute (and for older IE browsers, there is a method for this that scales the image to fit the space on both width & height axes. Added to the CSS, it would look like this:
body.jeffrey #content {
background: url(images/Blue-Prints-in-Addison-670pxwide.jpg) left top no-repeat;
background-size: auto 100%; /* the first value is the width, the second is height. Adjust them as needed */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/Blue-Prints-in-Addison-670pxwide.jpg', sizingMethod='scale' );
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/Blue-Prints-in-Addison-670pxwide.jpg', sizingMethod='scale' )";
)
ramseypMemberJohn, what browser are you using? IE 10 might support this, IE9 & older doesn't support border images. Firefox, Chrome & Safari should work fine. In Chrome, I see the shadow under the maps.
ramseypMemberTracy, you might take the approach of using a custom post type.
The idea is this: You make the post type of Photos. I would also create two custom taxonomies, one for species, one for bird categories. This way he can sort & group the Photos.
Does that make sense?
ramseypMemberHi Tracy, the link you have there looks like it's responsive. What site is needing the work?
ramseypMemberIf you want the excerpt to start below the image, regardless of the width, you could have the paragraphs on your homepage clear the image, since it's floated left.
Something like this in your CSS could work:
.home #content .entry-content p { clear:both; }
As long as the featured images are set to align left or align right, this would work.
ramseypMemberKate, try this CSS:
.jeffrey-content-sidebar-wrap #content {
background: url(images/Jeffrey-S-Lynch-Attorney-Profile-Background.jpg) no-repeat left top;
}You don't need /wp-content/themes/executive/ in there because of how the images directory and the style.css file are in the same parent directory. Also, I think no-repeat should come before "left top", but I may be mistaken.
ramseypMemberHi,
You need to upload a file called "logo.png" to your theme's images folder, replacing the one that's there. You should be able to do this via FTP or your host's file manager tool.
You could also upload a logo file ( It should be the same size as the one that's already there) to WordPress's media library. Copy the file URL from that and edit your stylesheet so it uses that for the logo. You want to look for this line (line 223 in Generate's style.css file)
.header-image #header #title-area {
background: url(images/logo.png) left top no-repeat;
}Replace images/logo.png with the file url of the uploaded image, save the changes & you should be able to see the new logo.
ramseypMemberTo do what you're wanting will require custom code, especially if you want to constrain the background inside the #wrap div or another specific div. One approach is to use the featured image of the page as the source of the background image. You'd have to write a function that takes the image & places it in the page, styled appropriately.
Another method is to use a custom field for the background image. This is helpful if the Featured Image is being used already for other purposes.
If you wanted the body to have the background image (a full-screen background image), you could use a plugin like "Full Screen Background Images Plugin". It's not a free one, but it supports different background images for different pages / posts.
ramseypMemberScott,
This would require some work in a page template or your functions file to work. You could conditionally load or unload content based on if the browser is a mobile one. WordPress has a function that works well for this: wp_is_mobile().
ramseypMemberIf you've got the script code from Typekit, you can insert it into the Header and Footer Scripts box (the first is for the header, the second is for code that needs to load in the footer) in your Genesis Theme Settings.
ramseypMemberIf you're saying you don't want [via-XXXX] to show up when someone shares the post, that bit of text will have to be inserted by some other method. Placing it in the post's content editor makes it part of the content body, so it gets shared along with the rest of the post's content.
A custom field would work, along with editing the theme's functions.php file so it's placed just under your post's content or somewhere else you prefer.
If you're familiar with the More Fields plugin, you could try using that to create the custom field. Getting its output into your blog or single post depends on how familiar you are with Genesis' hooks.
Pat
February 22, 2013 at 8:45 pm in reply to: Changing the background image for tablet view Magazine Theme #22347ramseypMemberHi there,
If your CSS is exact, you're missing a closing bracket. This:
@media only screen and (max-width: 960px) {
.sidebar-content #content-sidebar-wrap {
background: url(images/crunchy-background-TABLET.jpg);
}Should be
@media only screen and (max-width: 960px) {
.sidebar-content #content-sidebar-wrap {
background: url(images/crunchy-background-TABLET.jpg);
}
}Additionally, your layout appears to be "content-sidebar", so your CSS should read .content-sidebar #content-sidebar-wrap
Cheers!
Pat
ramseypMemberHi there,
There is a tutorial that was written a few years ago on how to do this: http://code.garyjones.co.uk/change-superfish-arguments/
It requires editing the code of your child theme, but it's should be pretty straightforward.
ramseypMemberHi Selena,
The slider has an opacity setting in the slider CSS of 80%, so your button is being "faded out", so to say. You will want to override it in your theme's CSS. This is what's shown in the slider CSS (I bold-faced the relevant declarations):
.slide-excerpt {
background-color: #fff;
filter: alpha(opacity=80);
display: block;
margin: 10px;
opacity: 0.8;
padding: 0;
position: absolute;
z-index: 8;
}Essentially, anything inside the slide-excerpt div will be faded some. In your theme CSS, you could add a line like this to override the opacity:
body .slide-excerpt { filter: alpha(opacity=80); opacity: 0.8; }
Should do the trick.
Pat
ramseypMemberHi Syska,
Viewing the source of that widget, it appears to be a text widget, which leads me to think it was hand-written HTML and a specificly-sized image used there.
ramseypMemberHi Cindy,
The tag cloud widget has a unique class that you can use to focus your adjustments to just that div and its contents:
widget_tag_cloud
. So, when you write CSS for the contents of the tag cloud div, you preface the CSS with.widget_tag_cloud
. For instance, if you wanted to change the link color to red for the tags, it might look like this:.widget_tag_cloud a { color: $ff0000; }
Read in English, it reads: any anchor tags inside the element with the class of widget_tag_cloud, color them red.
In your case, though, the alignment problem appears to be a CSS rule already in place. You can look for this in your CSS:
#featured-bottom .widget h2,
#content h6,
#sidebar h4,
#sidebar-alt h4,
#sidebar .widget_tag_cloud div div,
#sidebar-alt .widget_tag_cloud div div,
.author-box b, #comments h3There is a declaration of
margin-left: -25px
that is pulling the nested div over to the left 25px. You could override this with a single rule that has greater specificity that the bolded line above. Simply add the body tag to the chain like this:body #sidebar .widget_tag_cloud div div { margin-left: 30px; }
and you'll have a rule that overrides the one above. Add that line to your CSS and you should have the tag cloud align with your other sidebar content.
-
AuthorPosts