Styling the What's New Box for UYOH Users
The What's New Box lets your visitors read a bit about your most recent pages (or bloglets) before committing to clicking over to them.
For those who prefer to follow new content via their RSS reader, there are options available in the What's New Box.
The box comes with no styling, since each uploaded site has different styling needs. And the display and contents of the box are customizable, to suit your needs.
Customizing the Style of the Box
If you created your template in Site Designer, then downloaded the template files from Upload Your Own HTML, the easiest option for you is to return to Site Designer, style the What's New Box there, then download the template files again. Keep the CSS file and get rid of the rest.
Upload the CSS file with Quick Upload It! and you're done!
If you created a custom design, you'll have to style the box yourself, adding the following code to the style.css file for your template, customizing it to suit your site, then uploading the file using Quick Upload It!.
/* -- What's New Block -- */
.WhatsNew {
border: 1px solid #ccc;
margin: 1em 0;
position: relative;
}
#PageWrapper .WhatsNew img {
border: 0;
}
/* -- Main Headline -- */
#PageWrapper .WhatsNew h2 {
margin: 0;
padding: 0.3em 24px 0.3em 4px;
_padding-right: 4px;
background: #ccc;
line-height: 1.2;
font-size: 125%;
text-align: center;
}
#PageWrapper .WhatsNew ol,
#PageWrapper .WhatsNew ul,
#PageWrapper .WhatsNew li {
margin: 0;
padding: 0;
list-style: none;
*zoom: 1;
}
#PageWrapper .WhatsNew ol {
margin: 0 10px;
overflow: hidden;
}
#PageWrapper .WhatsNew ol li {
display: block;
padding-bottom: 1px;
border-top: 1px solid #ccc;
margin-top: -1px;
}
/* -- Item Headlines -- */
#PageWrapper .WhatsNew h3 {
font-size: 125%;
line-height: 1.2;
margin-bottom: 0;
}
/* -- Date and Time -- */
.WhatsNew-time {
font-size: 75%;
color: #888;
margin-top: 0.5em;
}
/* -- Read More Text -- */
.WhatsNew-more {
text-align: right;
margin: 1em 0;
}
/* -- RSS Icon and Subscription Options -- */
.WhatsNew-subscribe {
position: absolute;
z-index: 2;
top: 0;
right: 0;
text-align: right;
_display: none;
}
.WhatsNew-icon {
padding: 4px 4px 2px;
}
#PageWrapper .WhatsNew-subscribe ul {
display: none;
padding: 2px 4px;
background: #ccc;
}
#PageWrapper .WhatsNew-subscribe ul li {
display: block;
background-image: none;
}
#PageWrapper .WhatsNew-subscribe:hover ul {
display: block;
}
#PageWrapper .WhatsNew-subscribe ul img {
display: block;
padding: 2px 0;
}
/* -- Main Headline in Mobile-- */
.mobile #PageWrapper .WhatsNew h2 {
padding-right: 4px;
}
/* -- RSS Icon and Subscription Options -- */
.mobile .WhatsNew-subscribe {
position: static;
}
.mobile .WhatsNew-icon {
display: none;
}
.mobile #PageWrapper .WhatsNew-subscribe ul {
display: block;
text-align: center;
}
.mobile #PageWrapper .WhatsNew-subscribe ul img {
display: inline-block;
}
/* -- Left Alignment -- */
.WhatsNewLeft {
float: left;
margin-right: 0.5em;
}
/* -- Right Alignment -- */
.WhatsNewRight {
float: right;
margin-left: 0.5em;
}
/* -- Centered -- */
.WhatsNewCenter {
margin-left: auto;
margin-right: auto;
}
To see what the box will look like, you'll have to add the What's New tag code to one of your pages, upload that page with Upload Your Own HTML, and preview the page.
Customizing the Parts of the Box
The code to add to the page is...
***WHATS-NEW
width="100%"
alignment="none"
headline_text="Recent Articles"
headline_link="true"
rss_icon="true"
bloglet_count="3"
bloglet_date="true"
bloglet_description="true"
bloglet_more="true"
bloglet_more_text="Read more"***
Copy the code above and paste it into the page file in your HTML editor (you'll add it to an SBI! Include (if desired) below). Then make any desired changes to the box and its parts...
width="100%"
You can set the width to anything you want. If you plan to have the box in the Nav Column or the Extra Column, leave it set to 100%. If you plan to have the box in the Content Column, a width of 50% or so should work.
Remember, however, that mobile visitors will also be viewing the box. You don't want it too narrow, or it will be difficult for mobile users to read the item text.
alignment="none"
Set the alignment to "left," "right" or "center" depending on where on the page you want the What's New Box. Align it to center if you put the box in the Nav Column or Extra Column.
In the Content Column, if you align it to left or right, and the width is less than 100%, following text and images will wrap around the box. If you don't want the text to wrap, center it, or leave it set to the default "none."
headline_text="Recent Articles"
You can change the box's main headline text to anything you want to say, such as "Latest Articles" or "Recent Posts." Or leave it as is.
headline_link="true"
If you want the headline to be a link to the Blog It! page, leave this set to the default "true." If you do not want the link, change it to "false."
rss_icon="true"
If you want the RSS icon to display to the right of the headline (along with the button options you included when you set up RSS/Blog It! (RSS, Feedly, My Yahoo!), leave this set to the default "true." If you do not want the icon and buttons, set this to "false."
bloglet_count="3"
The default number of items in the box is 3. You can change the number to anything you want, up to 50 (the size of the RSS feed). However, we recommend that you not display more than 5, due to the resulting length of the box. Even 5 may be too many for your site.
bloglet_date="true"
If you want to display the date (and time) for each item, leave this set to the default "true." If you do not update your site much, you may not want to indicate how old recent pages are. Therefore, hide the date and time by setting this to "false."
bloglet_description="true"
If you want the item snippet text to display in the box (there's really no good reason not to), leave this set to the default "true." If you do not want the snippet text to display, change this setting to "false."
bloglet_more="true"
If you want a link at the end of each item snippet, which will become a link to the content page, or to the URL you included in the bloglet you created in RSS/Blog It!, leave this set to the default "true." If you don't want the text to display, set it to "false."
bloglet_more_text="Read more"
If you decided to have the link at the bottom of the snippet text, you can change what the link text shows. "Learn More" could be good for a site of an educational nature. Or "Continue Reading."
Going Sitewide
Once you have the box's format and styling the way you want them, via previewing the page and revising/uploading the CSS file, cut the tag from the page (Ctrl-X/Command-X) and save that file. Paste it into the SBI! Include for the location where you want the box to appear. Save the Include file.
Upload the page file again with UYOH, and upload the relevant Include during the process. Preview the page to ensure that the What's New Box displays properly. If everything is the way you want it, build the page.
Within an hour, all of your pages should have the What's New Box on them, in the location you want it.