Change code for ElegantBlog

Jun 3, 2013 at 8:01 PM
Edited Jun 3, 2013 at 11:27 PM
Can anyone tell me what would be needed to be changed for this code previously working with the Yoko theme to work in the ElegantBlog theme. Thank you.
<script runat="server">
protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
        string styleInfo = "<style type=\"text/css\"> #main {width:auto; float:none;} #tertiary {display:none;}</style>";
        var newStyles = new LiteralControl() {Text = styleInfo };
        this.Header.Controls.Add(newStyles);
        
}
</script>
Jun 4, 2013 at 9:45 AM
Hi Jerry,

Try this
<script runat="server">
protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
        string styleInfo = "<style type=\"text/css\"> .Content {width:auto; float:none;} .Sidebar {display:none;}</style>";
        var newStyles = new LiteralControl() {Text = styleInfo };
        this.Header.Controls.Add(newStyles);
        
}
</script>
Jun 4, 2013 at 3:35 PM
Thanks Andy, it works great and works also with the new Standard theme which I am customizing the colors. If you have some time could you help me with setting up an image header in the new Standard theme like this current one. Thank you very much.
Jun 4, 2013 at 7:52 PM
For the standard theme, do you want the header full width(covering both content and sidebar) or sitting in the content area.

In the standard site.master look for the code with leading comment <!-- PageWrapper-->

Full width: To cover both the content and sidebar area:
<!-- PageWrapper -->
        <section class="Container" id="PageWrapper">
            
            <!-- Insert header photo here -->
            <div id="headerphoto">
                <img width="970" height="308" alt="Pool through reeds" class="headerimage" src="/themes/standard/img/ginko.jpg">
            </div>
            <!-- End header photo -->
            
            <section class="Left Content">
                <Sc:ShowcaseControl ID="showcase" Width="700" Height="300" MaxItems="3" runat="server"/>
                <blog:SearchOnSearch ID="SearchOnSearch1" runat="server" MaxResults="3" Headline="You searched for" Text="Here are some results for the search term on this website" />
                <asp:ContentPlaceHolder ID="cphBody" runat="server" />
            </section>
For the content area only:
<!-- PageWrapper -->
        <section class="Container" id="PageWrapper">           
            
            <section class="Left Content">

                <!-- Insert header photo here -->
                <div id="headerphoto">
                    <img width="700" height="222" alt="Pool through reeds" class="headerimage" src="/themes/standard/img/ginko.jpg">
                </div>
                <!-- End header photo -->

                <blog:SearchOnSearch ID="SearchOnSearch1" runat="server" MaxResults="3" Headline="You searched for" Text="Here are some results for the search term on this website" />
                <asp:ContentPlaceHolder ID="cphBody" runat="server" />
            </section>
Mind and copy your header image over to the standard theme img folder.
You can of course change the id and class names to suit.

Just as a passing thought, have you considered dropping a slider in here to rotate a choice of header images?
Jun 4, 2013 at 8:26 PM
Thanks Andy, it works well, the slider sounds neat. See screenshot, can we add a little space between the image and the first post. What do you think about the whole container being a little wider?
Jun 4, 2013 at 9:29 PM
Edited Jun 4, 2013 at 9:34 PM
Looks fine.
You can style the image directly or via the parent container, so to give more spacing and styling to match everything else.

In your theme stylesheet:
#headerphoto {
    background: #FFF;
    padding: 10px;
    border: 2px solid #EEE;
    border-radius: 3px;   
    box-shadow: 0 0 3px #AAA;
    -moz-box-shadow: 0 0 3px #AAA;
    -webkit-box-shadow: 0 0 3px #AAA;
    margin-bottom: 15px;   
}
There's quite a number of options for sliders.
Nivo is quite versatile, you can set that to do simple fade in and out and can omit the nav controls.
The advantage of including something like Nivo is that you can use it throughout your site.

If you are happy to go with a fade in out and likely to use just with the header image, a short script might be better.
If that's the case, I'll sort something for that tomorrow and pass it on.

Edit, just noticed that you have to use the code inserter with this codeplex editor or things get screwed up, which I hadn't - OK now.
Jun 4, 2013 at 9:35 PM
Edited Jun 4, 2013 at 9:39 PM
Thanks Andy, I appreciate your generous time and talents you have offered me. I think that a fade in and out of the header image would be great.

Although I am almost 70 years of age, this stuff is interesting to me, I am making an effort to learn more about html5, css and Javascript.


Thanks again.
Jun 5, 2013 at 11:49 AM
Hi Jerry,

Here's what you need for the slideshow, it uses a very short script by Jon Raasch.
3 steps required:
  1. Add the script to your site.master header
  2. Add markup to your site.master
  3. Add CSS rules to your theme stylesheet
Add script before closing head tag
<head runat="server">
    <link href="include/core.css" rel="stylesheet" />
    <link href="include/styles.min.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
    <link rel="shortcut icon" href="~/pics/blogengine.ico" type="image/x-icon" />
    <link href="~/editors/tiny_mce_3_5_8/plugins/syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="~/editors/tiny_mce_3_5_8/plugins/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="<%# ShRoot %>scripts/XRegExp.js"></script>
    <script type="text/javascript" src="<%# ShRoot %>scripts/shCore.js"></script>
    <script type="text/javascript" src="<%# ShRoot %>scripts/shAutoloader.js"></script>
    <script type="text/javascript" src="<%# ShRoot %>shActivator.js"></script>

    <!--Slideshow script inserted just before closing head tag-->
    <script type="text/javascript">   
        function slideSwitch() {
            var $active = $('#slideshow img.active');
            if ($active.length == 0) {
                $active = $('#slideshow img:last');
            }            
            var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
            $active.addClass('last-active');

            $next.css({ opacity: 0.0 }).addClass('active').animate({ opacity: 1.0 }, 1500,
                function () {
                    $active.removeClass('active last-active');                    
                });
        }

        $(document).ready(function(){
            setInterval(slideSwitch, 4000);           
        });
    </script>
    <!--End slideshow script-->

</head>
Your markup, in the same place you have it now
<!-- PageWrapper -->
        <section class="Container" id="PageWrapper">

            <!--Substitute image names and descriptions as required(or add or remove img tags as required)-->
            <div id="headerphoto">
                <div id="slideshow">
                    <img width="946" height="284" alt="Pool through reeds" class="active" src="/themes/standard/img/ginko.jpg" />
                    <img width="946" height="284" alt="description 2" src="/themes/standard/img/image2.jpg" />
                    <img width="946" height="284" alt="description 3" src="/themes/standard/img/image3.jpg" />
                    <img width="946" height="284" alt="description 4" src="/themes/standard/img/image4.jpg" />
                </div>
            </div>
            <!--End slideshow markup-->

            <section class="Left Content">
                
                <blog:SearchOnSearch ID="SearchOnSearch1" runat="server" MaxResults="3" Headline="You searched for" Text="Here are some results for the search term on this website" />
                <asp:ContentPlaceHolder ID="cphBody" runat="server" />
            </section>
            <aside class="Right Sidebar">
                <blog:WidgetZone ID="WidgetZone1" runat="server" ZoneName="be_WIDGET_ZONE" />
            </aside>
        </section>
        <!-- /PageWrapper -->
CSS rules to stylesheet
#headerphoto {
    background: #FFF;
    padding: 10px;
    border: 2px solid #EEE;
    border-radius: 3px;   
    box-shadow: 0 0 3px #AAA;
    -moz-box-shadow: 0 0 3px #AAA;
    -webkit-box-shadow: 0 0 3px #AAA;
    margin-bottom: 15px;   
}
#slideshow {
    position:relative;
        width:946px;
    height:284px;
}

#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow img.active {
    z-index:10;
    opacity:1.0;
}

#slideshow img.last-active {
    z-index:9;
}
Jun 5, 2013 at 3:08 PM
Thank you Andy, this works and looks great. Check it out!
Jun 5, 2013 at 7:43 PM
Nice photos.

Glad it's working OK.

Meant to mention, if you need to use that with a responsive theme, just omit width from CSS slideshow.
#slideshow {
    position:relative;    
    height:284px;
}
Jun 6, 2013 at 2:23 AM
Hi Andy,

I am using the new Standard theme as the Mobile Theme also, I checked it on my Android phone and it looks great, the slide show photos look great also. So I presume it is a responsive theme and it is working as is with the width stil in the CSS.
Jun 6, 2013 at 4:53 PM
Hi Jerry,

From what I understand about responsive themes, they should adapt their layout to accommodate different screen sizes in order to minimize panning, zooming and scrolling. As far as I can tell, the standard theme is not responsive in that sense. I didn't see any indication in the CSS to suggest it's coded that way, but could be wrong. Anyway, had a look at it on an iPod and although it shrinks to fit the screen, it's too small like that for practical use, you have to zoom and pan. I use the desktop 99.9% of the time and usually just drag the the browser window in and out to see how a site responds, but there are some good simulators on the web to test with. The new BlogEngine site is responsive, type its URL into the simulator to see how the site looks on different devices.

Just as a side note, I noticed your header images are serving up full size. Maybe you're still testing. I mention it because when checking earlier with the iPod, it was slowing things down somewhat, you'll notice quite a difference on load with the images sized down.

Cheers.
Jun 6, 2013 at 6:45 PM
Thanks for the heads up on the images Andy, I resized them. What mobile theme do you recommend?
Jun 6, 2013 at 10:52 PM
That's a tricky one,

I'm with you on going with a responsive theme, you only have to maintain one theme and it looks like the same site across devices. Nothing wrong with switching to a mobile theme, it's just that sometimes it looks like a completely different site unless you take the time to customize and maintain that also.

Unless I'm mistaken, the newsletter widget doesn't(or didn't) work with razor themes, so that narrows your choices(I say 'your' choices since I know you make extensive use of that widget). If I'm wrong about that, great, more choice.

There's a couple of things I personally consider important when looking at a responsive theme.

Loss of content, test different themes by dragging the browser window in and out and make sure things like the sidebar doesn't disappear.
Accessibility, is the main navigation available without JavaScript. That's a good indicator as to whether a visitor with special needs will be able to use your site.

So, on that basis I'd be going with the ElegantBlog or Yoko theme.
That's not to say there's anything wrong with the other themes, I'm just stating some of the criteria I would use in trying to narrow it down.
Other than that it's probably down to taste and the look and feel that best fits your content.

I went back and had a look at your site with the header images resized, it's definitely running smoother. If you don't mind me making another suggestion, you can get the file size down by about two thirds for each image by resampling. I opened image 2 in photoshop and saved for web as JPEG with quality set to low. The image is still good, but it went from 89k to 25k. That's quite a saving, especially when multiplied by the number of images used.

Cheers.
Jun 6, 2013 at 11:23 PM
Thank you Andy.