Community Forums › Forums › Archived Forums › Design Tips and Tricks › Ambiance Pro Custom changes by newbie
Tagged: ambiance pro, Containers, header image, menu, title
- This topic has 1 reply, 2 voices, and was last updated 9 years, 9 months ago by Brad Dalton.
-
AuthorPosts
-
June 10, 2014 at 8:40 am #108766JamesmMember
Hi fellow members,
I just wanted to share what I have played with the last few days since I purchased a Studiopress framework and theme.
Hope it helps someone, as I had a bit of a struggle until I used Firefox Firebug to nail down the proper selector to use in editing the CSS file.
I plan on using a custom shortcode to change all page tiles dynamically to images and am working on that now. Don't know if I will let a script create the images on the fly or pre-create the images and pull them in as needed.
The blog might make my decision for me.
James
--------------------------------------------------------------------------------------
//* Added functionality for larger custom header image.
//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );//* Add support for custom background
add_theme_support( 'custom-background' );//* Add new featured image size
add_image_size( 'entry-image', 800, 450, TRUE );//* Add support for custom header
add_theme_support( 'custom-header', array(
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 118, //* this was 80
'width' => 550, //* this was 360
) );//* Slide menu and dashicon to right
/* Responsive Menu
---------------------------------------------*/
/* added this to see if this would slide the menu wrap to the right; it worked! */
nav.nav-primary {
margin-right: -165px !important;
}//* Slide Title area to the left, also change width and height of image box
/* Title Area
--------------------------------------------- */.title-area {
margin-left: -165px; /* added this to move Title area to left */
float: left;
padding: 10px 0;
width: 550px; /* was 360px */
}.header-image .site-title > a {
float: left;
min-height: 118px; /* was 80px */
width: 100%;
}//* Added this to allow for page contrast over a background color or texture.
.site-inner { /* added a whole bunch of stuff to fill out a border and background */
clear: both;max-width: 1200px;border: solid 1px black;padding: 20px 20px 0 20px;background-color: white;border-radius:15px;margin-top: -30px;
}//* Added to get min page height out of box so it won't look so goofy
http://marlow-stepan.org/
/* Site Containers
--------------------------------------------- */
.site-inner {
min-height: 900px; /* added this to gain a minimum height */
}June 10, 2014 at 9:21 am #108768Brad DaltonParticipantGood stuff!
However, please use Gitbhub Gists to embed PHP code as it breaks if you paste it in a web page raw.
I plan on using a custom shortcode to change all page tiles dynamically to images and am working on that now
What exactly do you want to do with your titles and why use a shortcode?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.