These are the instructions for the soon-to-be-released SLR Lounge WordPress Theme v3. For updates on the release, please join this group.
To customize your WordPress theme, first click on “Customize” link as shown below.
After you’re on the customize page, you’ll be able to customize each aspect of your website. As you make changes in the panel on the left, you’ll see the page refresh on the right to reflect your changes. However, nothing changes on your actual, publicly visible site until you press the blue “save” button.
- Website Layouts
- Background Colors
- Navigation & Logos
- Header Fonts
- Main Content Fonts
- Footer Fonts
- Comment Fonts
- Sidebar Fonts
- Slideshow (For Blog Only)
- Advanced Options
- Widgets (Footer and Sidebar)
The first section you see is the “Information” section that provides general information on our theme. You are currently viewing the instructions and updates page. In this section, you can also reset your theme settings. However, use caution, as you will have to reupload your logo, favicon, slideshow images, and embellishments. You will also have to redo any custom settings you adjusted.
Updates – We are currently on version 3.0. Check in the following location within your theme to see if your theme version matches.
Appearance -> Themes -> Theme Details
2. Website Layouts
In this section, choose your layouts for your menu, blog home and portfolio home.
Note: The number of posts displayed on your home page is set within the Reading Settings. (Settings -> Reader -> Blog pages show at most). For example, if you have this set at 1, only one post will show on your blog post home. We highly recommend against using a number higher than 20. The more posts that need to be loaded, the slower the load times will be from “previous” and “next” pages and the choppier the “load more” will function.
Blog Home Page Layout
Choose Your Blog Home Page Layout. This layout choice only affects the blog main page. It does not determine the layouts for the individual blog posts, portfolio pages or other pages on the site. If you would like to increase or decrease the number of posts shown here, go to your Reading Settings (Settings -> Reading).
Centered – Centers the menu items under the logo. Decreases the amount of room available for the primary content but may work better with your logo or Blog Page Layout.
One Column – Displays a featured image from each post and an excerpt in a single column.
One Column Full Text – Displays the full posts (all images and text) chronologically.
Two Columns – Displays a featured image and excerpt from all posts (all images and text) chronologically in the left column with an empty sidebar (right) column for widgets.
Two Column Full Text – Displays the full posts (all images and text) chronologically in the left column with an empty sidebar (right) column for widgets.
One Column Images Only – Displays a single featured image from each post chronologically.
Pinboard – Displays thumbnails of the featured images from each post chronologically.
Pinboard Full Screen – Displays thumbnails of the featured images from each post full screen chronologically.
Blog Individual Page Layout
This section only affects the layouts of the individual blog entries. You have two choicees, One Column and Two Columns.
One Column – Displays a the full blog post in a single column.
Two Columns – Displays the full blog entry in the left column with an empty sidebar (right) column for widgets.
Portfolio Home Page Layout
This section controls the layout of the Portfolio Home Page. The Portfolio Home Page is the full listing of your portfolio Items (also called projects). If you would like to display multiple projects, select “Pinboard Full.” If you’d like to instead display images from a single project, select the “Hero” option. Hero layout only displays the images in your first project (the oldest one) and does not display the rest. It displays it full width and height of the browser window.
If you are a photography studio with multiple portfolio galleries, we suggest using the “Pinboard Full” layout. If you are a photographer with a few select images that you would like to display, we suggest using the “Hero” layout.
Pinboard Full Screen – Displays thumbnails of the featured images from each project full screen (chronologically). ***Note: The project must have “feature this content” checkbox checked for it to display on this page. For more information on setting up your portfolio, including ideal portfolio dimension and more, click here.
Hero – Displays images from a single project, pulling from the images in the first project (the oldest one). ***Note: Project must have “feature this content” checkbox checked for it to display on this page.
Portfolio Individual Page Layout
This section controls the layout of your individual portfolio pages. You can choose between two layouts, a “tearsheet” layout or a “hero” layout.
Tearsheet – This is the recommended display for your portfolio images because you are able to keep image sizes relatively small (compared to the hero layout).
Hero – Displays images in your portfolio gallery in full screen. For more information on setting up your portfolio, including ideal portfolio dimension and more, click here.
3. Background Colors
Main Background Color – Select your main Background color. This appears below the header. above the footer and behind the main content. See the image below.
The grey areas are the “main background color.” This also applies to the backgrounds of other pages like the blog home and portfolio home.
Main Background Image – If you would like to use an image rather than a solid color, upload your background image here. You can choose to have your background image tile (repeat) or remain static (not repeat)
Note: for interesting, free image backgrounds, we recommend SubtlePatterns.com
Header Background Color – Set the color of your header background here.
The white section that includes the logo and the menu is considered the header. Set the background color for that section here.
Content Background Color – Determine the background color of your content area.
See the Blue Background in the image above for an idea of what part of the site this controls.
Footer Background Color – This controls the background color of the footer.
See the areas marked with a red box to get an idea of what this controls.
Comment Background Color – This controls the background color of the comment section of each page.
4. Navigation & Logos
Your theme supports 2 menus, the Header Menu (which is at the top of your page) and the Footer Menu (which is at the bottom of your page). Select which menu appears in each location. You can edit your menu content on the Menus screen in the Appearance section. Click here for more details on setting up your WordPress menu.
Back to Top Icon
This icon appears at the bottom right of your website and takes the user back to the top of the page.
Arrows or Load More
Set how users navigate to view more posts or portfolio entries. By default, the theme is set to “load more” but you may change it here to use the arrows.
“Load More” Background Color – Set the background color of the “Load More” navigational element.
“Load More” Background Hover – Set the background color of the “Load More” navigational element on hover.
Previous Page/Post Icon – Upload your custom Previous Page or Post Icon if you would like.
Next Page/Post Icon – Upload your custom next Page or Post Icon if you would like.
Favicon – A Favicon is the symbol that appears in the tabs of most browsers. Upload your Favicon here. A favicon should be 32px by 32px and should be a transparent PNG file.
Logo – Upload your logo here. the logo does not resize so you must upload the exact size. we recommend a logo that is no more than 300 pixels wide.
Logo Text (if no image) – If you do not want to use an image as the logo, input the text that you would like to use instead here.
5. Header Fonts
Logo Font (if no image) – This controls the styling of the text in place of your logo.
Menu Font Options – Adjust the font for the menu items.
Search Font – Adjust the font settings of the text within the search bar.
6. Main Content
Post Info (in individual posts) – Choose to display or not to display the date, categories, and tags for each individual post.
Title Font – Adjust the font settings of the Titles of each post.
Body Font – Adjust the font settings for the body of each post.
Link Color – Adjust the color of the links within each post.
Blockquote Font – Adjust the settings for the Block Quotes.
Enable Drop Cap & Drop Cap Font– Check this box if you’d like to enable Drop Caps for your posts and pages.
Image Hover Title Font (Pinboard & Image Only Layouts Only) – Within the Pinboard and Image Only layouts, you may set the font of the titles that appear upon hover.
Image Hover Category Font (Pinboard & Image Only Layouts Only) – Within the Pinboard and Image Only layouts, you may set the font of the categories that appear upon hover.
7. Footer Fonts
Widget Title Font – Set fonts for the Widgets in the footer. Think of widget titles as the titles of the columns in the footer.
Post Title Font – Set the font for the titles of each individual post or page within the footer.
Post Info Font – Set the font for the info (date and number of comments) for each post within the footer.
Post Excerpt Font – Set the font for the excerpt for each post within the footer.
Copyright Font – Set the font for the copyright information that appears at the bottom left corner of your website.
8. Comments Font
Set the font for title of your comments section (the actual word – Comment)
Comment Title Font
Set the font for title of your comments section (the actual word – Comment)
Comment Name and Date Font
Set the font for the names of the commenters and Dates for each comment.
comment Body Font
Set the font for the text of the actual published comment.
Comment Field Font
Set the font for the text of the unpublished comment as it is being typed.
Comment Submit Button Font
Set the font and background color and hover color of the submit button.
9. Sidebar Fonts
Widget Title Font
Set fonts for the Widgets in the sidebar. Think of widget titles as the titles of each section of the sidebar.
Post Title Font
Set the font of the Post Titles within the Sidebar
Set the font of the post dates within the sidebar.
Set the font of the post excerpts within the sidebar.
10. Slideshow (Blog Layout Only)
Set your slideshow options here. Choose which places you want to show your slideshow as well as the height and duration.
- Enable slideshow – Decide where you want to display the slideshow. You can either disable completely with “No Slideshow,” show it on the “Blog Home Only,” show it on the “Blog post only,” or show it on the “blog home and post.”
- Slideshow Height (px) – Input your slideshow height here. We recommend keeping under 300 px.
- Slideshow Transition Duration – Choose the speed of the transitions from image to image. We recommend “Normal” but you may speed it up or slow it down here.
Slideshow Images – Upload your slideshow images here. Be sure to use exact dimensions based on the height you set in the previous options and minimize your overall file size in order to speed up your load times. You may upload up to 6 images.
Set your social media settings that affect the menu icons as well as the Pinterest image overlays.
Determine the position of your pinterest icon over your images and upload your own custom pinterest icon.
This section controls the content and styling of the social icons in the menu.
Icon Color – Controls the color of the social icons in the menu
Social Network URLs – Enter the full URL of your Social Networks Page (if you would like an icon to display)
Other Social Network Icons – Upload an icon of any social network not listed above. (if you would like an icon to display)
Use this section to add and adjust the small embelilshments on your site.
Menu Underline Embellishment – This controls the embellishment that underlines the menu item. You may upload your own here.
Post Separator (Body) – This controls the embellishment that separates each post in certain blog home layouts. See the image below.
Post Separator (Sidebar) – This controls the embellishment that separates each post in the sidebar of certain blog home layouts
Section Title Background Image – This controls the optional background image that appears behind each widget title in the sidebar.
13. Advanced Options
Copyright Information – This is the text that appears in the bottom left corner of your website. To display the current year, use the following: © $Y$
Date Format – Select the date format you would like to use. We recommend sticking with the format most familiar with your region.
Custom CSS – Enter any custom CSS you would like to include in your theme here.
Input your content for the sidebar and the footers in the widgets section. In the customizer, the widget options only appear for the page that you are currently on. For example, if you are on the home page and you click into “Widgets” in the customizer, you will be modifying the widgets for the home page only. If your layout selected has a sidebar, you will have options for modifying the sidebar. If not, sidebar options will simply not appear.
In the image above, we are viewing an individual post. So the customizer on the left only gives us widget options for individual posts. If we had selected a layout with a sidebar for individual posts, the customizer would also give us options for sidebar widgets as well.
Recommended Widgets: While you can put any widgets you would like (default widgets, 3rd party widgets from plugins you may have installed, etc), we have created a set of custom widgets for your use. Please use the following:
1) SLR Lounge Theme: Featured Content
Post Footer Left – The footers of the theme are divided into three columns. In the example below, you see “Post Footer – Left” indicating that you are working on the individual posts’ left footer column.
Title: Whatever you type in here will appear as the title for the column.
The next three fields, “Content Type,” “Category,” and “Number of Items to Show” are pretty self explanatory. In the “Content Type” field, choose between showcasing featured posts or featured projects. In the “Category” field, choose which category to pull the featured content from. In the “Number of items to show” field, indicate how many posts you would like to show in that column. We recommend a number between 2 and 4.
Important Note: Your posts will not appear unless the “feature this content” box is checked within each individual post or project.
If the “Display the featured image” box is checked, the featured image will display. If it is unchecked then the image will not display.
If the “Display the excerpt” box is checked, the excerpt will display. If it is unchecked then the excerpt will not display.
If the “Display the date and number of comments” box is checked, the date and number of comments will display. If it is unchecked then the date and number of comments will not display.
2) SLR Lounge Theme: Recent Posts
The “Recent Posts” behave very similarly to the “Featured Content” widget. The “Title” is the title of the column, the “Category” is the category from which you would like to pull, the “Number of posts to show” is simply the number of posts you would like displayed, and the checkbox for “Display the featured image” controls whether or not the featured image appears.