What about a banner at the top of the site?

  • Author
    Posts
  • #92589

    straumsundet
    Member

    I´m very pleased with the Owari theme, but I can think of some adjustments:
    I want the “last news” to be more prominent, and at the same time reserve the space in the right column to adverticements.
    Is it possible to implement a floating banner with “last news” at the top of the site? To get an idea of what I´m thinking of, take a look at http://themes.themegoods2.com/?theme=Venus
    Grateful for a rapid responce

    The blog I need help with is tunnelsyn1.wordpress.com.

    #92899

    lelandf
    Theme Author

    Hi straumsundet,

    Thanks so much for using the Owari theme!

    I took a look at the “Latest News” heading in the Venus theme and tried to come up with a similar effect with Custom CSS.

    Can you try this code to see what you think?

    #main::before {
        content: "Latest News";
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 48px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        padding-top: 84px;
    }
    #92903

    straumsundet
    Member

    Hi,

    Thanks for your replay.

    Seems that I have expressed myself unclear.

    I was thinking of the floating banner at the top of the header, starting with a red felt stating: “Breaking”, and then the contet of the widget “Last news”, rolling nicely over the screen at the top of the site.

    #92904

    lelandf
    Theme Author

    Oh, I understand what you mean now.

    While that’s possible to do code-wise, as you can see in the Venus theme, it’s not possible with just Custom CSS.

    That change would need to be applied to every WordPress.com site running the Owari theme, and I’d imagine it’s not something everyone would be happy with.

    It’s also a feature that wouldn’t really fit the focus of the theme. That’s something you would expect to see on a news or magazine theme, which Venus is. Owari is more of a blog theme with a focus on photography.

    Unfortunately, this is a customization we won’t be able to make here.

    I hope you understand.

    #92905

    lelandf
    Theme Author

    Actually, I thought of a way where we might be able to use just custom CSS to apply this customization to just your site.

    Would you mind adding another Recent Posts widget to your sidebar?

    Title it with whatever you want the text of “Latest News” to be. And set the number of posts to how many posts you’d like to scroll through.

    #92906

    straumsundet
    Member

    Actually, I think that Owari is wery vell suited for magazines, so I´m glad that you have come up with a way to make “Latest news” more prominent for my readers.

    Sorry, but I don´t follow your thinking about the way to do it. Do you plan to move “Latest news” 2 to the top of the site?

    I´m very well pleased with one. If I have one at the top, I don´t need another one at the side.

    #92907

    lelandf
    Theme Author

    Try the following CSS code:

    #recent-posts-5 {
    	background: #eee;
    	max-width: 100%;
    	position: absolute;
    	top: -96px;
    	left: 0;
    	width: 100%;
    }
    
    .main-navigation {
    	margin-top: 48px;
    }
    
    #recent-posts-5 .widget-title {
        background: #ed232a;
        display: inline-block;
        margin: 0;
        letter-spacing: 2px;
        padding: 0 12px;
        position: absolute;
        z-index: 1;
    }
    
    #recent-posts-5 .widget-title,
    #recent-posts-5 ul,
    #recent-posts-5 li {
    	display: inline-block;
    }
    
    #recent-posts-5 ul {
    	animation: marquee 50s linear infinite;
    	position: relative;
    	white-space: nowrap;
    	width: 100%;
    }
    
    #recent-posts-5 ul:hover {
        animation-play-state: paused;
    }
    
    #recent-posts li {
    	padding-right: 1em;
    }
    
    #recent-posts-5 .widget-title,
    #recent-posts-5 ul {
        line-height: 48px;
    }
    
    #recent-posts-5 a {
    	color: #000;
    }
    
    #recent-posts-5 .post-date {
        display: none;
    }
    
    @keyframes marquee {
        0%   { transform: translate(100%, 0); }
        100% { transform: translate(-100%, 0); }
    }
    #92909

    straumsundet
    Member

    I really, really like this!

    Two minor details only:
    How to better separate the five posts mentioned in the stream?
    Now there are to red felts close to each other, shouldn´t they be the same red colour?

    #92910

    lelandf
    Theme Author

    It looks like you changed the line-height from 48px to 30px. If you want a shorter ticker, that’s fine, but there are a couple other things you need to adjust to balance it out.

    Please change the #recent-posts-5 code to this:

    #recent-posts-5 {
        background: #eee;
        max-width: 100%;
        position: absolute;
        top: -78px;
        left: 0;
        width: 100%;
        overflow: hidden;
    }

    We also don’t need to be pushing the main navigation as much. Replace the .main-navigation code with this.

    .main-navigation {
      margin-top: 30px;
    }

    How to better separate the five posts mentioned in the stream?

    I made a typo here. Do you see above where I said this?

    #recent-posts li {
    	padding-right: 1em;
    }

    Change that to:

    #recent-posts-5 li {
    	padding-right: 1em;
    }

    We always need to be using the #recent-posts-5 selector to target this particular widget.

    Now there are to red felts close to each other, shouldn´t they be the same red colour?

    I’m not exactly sure what you mean by this. Could you take a screenshot so I can better understand what you’re saying?

    P.S. If you’re interested in learning more about the technique, I elaborated on my blog: How to Code a Scrolling News Ticker with Pure CSS and No Custom Markup

    #92911

    straumsundet
    Member

    Perfect! This looks professional!

    Thank you so very much!

    On your blog you make the code self-explanatory. I like that.

    Regarding the two different red felts, I was speaking of the widget title, and “Tunnelsyn” – the title of my site.

    By the way: The animation doesn´t work on my mobile (Samsung)

    #92912

    lelandf
    Theme Author

    I’m glad you like it. :)

    Okay, I understand what you mean now. To get the matching reds, simply replace background: #ed232a; with background: red; under the #recent-posts-5 .widget-title selector.

    By the way: The animation doesn´t work on my mobile (Samsung)

    CSS animations should be pretty well supported in modern browsers by now, as we can see on the reference website caniuse. It looks like old versions of Internet Explorer and Opera Mini are the only ones which don’t support it at all.

    Since we can’t use custom JavaScript here, this is a limitation we’ll have to live with. On the bright side, usage for these browsers is quite low these days.

    I’m guessing your mobile phone is using a version of a browser that requires a -webkit prefix.

    For more complete support on webkit browsers, try adding the following code to see if it helps.

    @-webkit-keyframes marquee {
    	0%   { -webkit-transform: translate(100%, 0); }
    	100% { -webkit-transform: translate(-100%, 0); }
    }
    
    #recent-posts-5 ul {
    	-webkit-animation: marquee 50s linear infinite;
    }
    
    #recent-posts-5 ul:hover {
    	-webkit-animation-play-state: paused;
    }
    #92914

    straumsundet
    Member

    Marvelous! The animation works on my mobile!

    Thank you so much!

    #92918

    lelandf
    Theme Author

    No problem! I’m glad I could help.

    I’ll go ahead and mark this thread as resolved.

    If you have any other questions, feel free to start another support thread here.

    Regards,
    Leland

    #92928

    straumsundet
    Member

    Hello again!

    The animated banner seems to have made wonders. My readers are reading more posts now than before!

    Have two new questions for you:
    I plan to place adverticements on top of my site, just below the header. What code should I use to get it in the right place? Can you also indicate an ideal hight and with for an adverticement in such a prominent place?

    Once in a while a melody inspires me to write a new post. Is it possible that my readers can hear the melody as soon as they opens the post? (Until now I have embedded a YouTube video with the melody in the posts, which the readers then have to click on to be able to hear.)

    Even better: If I mark the post as “featured”, can I make them hear the music as soon as they enter the site?

    Thanks for your answer!

    #92929

    lelandf
    Theme Author

    Hello,

    So glad to hear the good news about the animated banner!

    As far as advertising goes, I’d encourage you to check out the WordPress.com Advertising as well as the User Guidelines pages.

    Here’s a quote from the User Guidelines page:

    Advertising isn’t permitted unless you use WordAds or have a WordPress.com VIP or Enterprise site.

    If you use WordAds or other permitted form of advertising, go ahead and place the widget in your sidebar, then we can discuss making it look good in the Owari theme.

    If you have any additional questions about WordPress.com’s advertising policies, I’d encourage you to contact WordPress.com staff directly.

    As far as playing sound effects, we’re venturing outside of the realm of theme support.

    I don’t want to say it’s impossible, but I would urge you to reconsider autoplaying sounds.

    I’ll defer to the W3C’s article on audio control if you want to learn more about why it’s a bad practice.

    If you decide to disregard this advice, I’d look into some of the Shortcodes available to WordPress.com users, particularly the ones listed under “Audio.”

    I’m not sure if any of them allow autoplaying, but again, any further questions about this are best directed to WordPress.com staff.

The topic ‘What about a banner at the top of the site?’ is closed to new replies.