Francisco Cortes
asked 10 years ago

The older version of Focus had 3 columns/widgets in the header. The latest version only has 1. I need 2. How do I add this?

5 Answers
DominicStaff
answered 10 years ago

To resolve this issue, you can log in to Dashboard > Appearance > Widget > add the Text widget to Header section, then add the following code to the Text widget:

<div class="row widgets-sidebar-header">
    <aside class="widget widget_text span3" id="text-25">
        <h3 class="widget-title">Sponsor link</h3>     
        <div class="textwidget">
            <div class="ads ads-60">
                <a title="Multi Grids Responsive with JigoShop" href="http://bit.ly/tf-wallclassic" class="ads-thumb">60 x 60</a>
                <div class="ads-inner">
                    <h5 class="ads-title"><a title="Multi Grids Responsive with JigoShop" href="http://bit.ly/tf-wallclassic">WallClassic</a></h5>
                    <span class="ads-meta">Ads by <a title="Responsive WordPress Themes" href="http://designwall.com">DesignWall</a></span>
                </div>
            </div>
        </div>
    </aside>

    <aside class="widget widget_text span3" id="text-26">
        <h3 class="widget-title">Sponsor link</h3>     
        <div class="textwidget"><div class="ads ads-60">
            <a title="Responsive Portfolio WordPress Theme" href="http://bit.ly/cm-simplex" class="ads-thumb">60 x 60</a>
            <div class="ads-inner">
                <h5 class="ads-title"><a title="Responsive Portfolio WordPress Theme" href="http://bit.ly/cm-simplex">DW Simplex</a></h5>
                <span class="ads-meta">Ads by <a title="Responsive WordPress Themes" href="http://designwall.com">DesignWall</a></span>
            </div>
        </div>
    </div>

    </aside>
    <aside class="widget widget_text span3" id="text-20">
        <div class="textwidget"><div class="ads ads-230x60">
            <a title="Responsive One Page WordPress Theme" href="http://bit.ly/ZgNf6q" class="ads-thumb">230 x 60</a>
            <span class="ads-meta">Ads by <a title="Responsive WordPress Themes" href="http://designwall.com">DesignWall</a></span>
        </div>
    </div>
    </aside>                  
</div>

Hope this helps !

Franc Coenen
replied 10 years ago

So far so good, but how can I make the picture visible?

Dominic Staff
replied 10 years ago

You can use the following code: http://snippi.com/s/epbo1pw
Notice: Add your image to Media then copy FILE URL on the right hand side and change it here:

Franc Coenen
replied 10 years ago

Sorry, this is a different code. If I put this in the header, at the righ sight it show a sqauere banner af 230 by 230.

Franc Coenen
replied 10 years ago

I think I solved it by changing the size of the banner.

DominicStaff
answered 10 years ago

Don’t worry, the issue is because you does not yet change the Image link in the File URL (<img src=”FILE URL”> ). Also, you can add the following code to the Header Code (customize > Custom Code) to hide the size in the ads banner.

<style>.ads-230x60 .ads-thumb img { width: auto; } </style>
Anthony
answered 10 years ago

Thanks for the code, Dominic. I was looking to reconstruct the original 3 widget header (which I actually like better), and your snippet works almost perfectly, except that a) the vertical border line between the logo and the widgets is missing, and b) the whole header height is now taller (creating a misalignment between the logo and the widgets, i.e. their bottoms do not sit on the same level). Could you shed some light on that? Thanks. 

DominicStaff
answered 10 years ago

a) To add a vertical border line between the logo and the widgets, you can add the following code to the Header Code (Dashboard > Customize > Custom Code)

<style>
#sidebar-header .widget_text {
margin-left: 60px;
margin-right: -63px;
}
@media (min-width:980px) and (max-width:1079px) {
.site-header #header #sidebar-header .span3 {
width: 280px
}
#sidebar-header .widget_text {
margin-left: 30px !important;
margin-right: 0px !important;
}
}
</style>

b) Please send me your site for further checking.

Anthony
answered 10 years ago

Thanks for the help, Dominic. I have set up a test site at http://bit.ly/UvpB5K
But as you can see, a) the custom code actually squeezes the width of the text widgets while leaving some redundant margin to the right of the logo;
b) the misalignment is probably resulting from the taller banner (90 pixels high, as in 770 x 90) while the original header is designed to fit with the logo (80 pixels high, as in 230 x 80).
Any idea?

Anthony
answered 10 years ago

To elaborate a bit, I am trying to recreate the original header from DW Focus 1.0 (which I believe stands out among so many other magazine themes out there with just a big banner at the top). Perhaps a few lines of CSS from the previous version would help bring back that border line between the logo and the text widgets, and shorten the header height by 10 pixels? Thanks.

Wilfred
answered 10 years ago

Hi Nameslave, 
Thank for the additional comments.
To resolve your issue, please follow my instruction below to get the solution.
1. Log in to Dashboard > Appearance > Widget > add the Text widget to Header section, then add the following code to the Text widget:

<div class="row-fluid widgets-sidebar-header">
<aside class="widget widget_text span4" id="text-25">
<h3 class="widget-title">Sponsor link</h3>
<div class="textwidget">
<div class="ads ads-60">
<a title="Multi Grids Responsive with JigoShop" href="http://bit.ly/tf-wallclassic" class="ads-thumb">60 x 60</a>
<div class="ads-inner">
<h5 class="ads-title"><a title="Multi Grids Responsive with JigoShop" href="http://bit.ly/tf-wallclassic">WallClassic</a></h5>
<span class="ads-meta">Ads by <a title="Responsive WordPress Themes" href="http://designwall.com">DesignWall</a></span>
</div>
</div>
</div>
</aside>

<aside class="widget widget_text span4" id="text-26">
<h3 class="widget-title">Sponsor link</h3>
<div class="textwidget"><div class="ads ads-60">
<a title="Responsive Portfolio WordPress Theme" href="http://bit.ly/cm-simplex" class="ads-thumb">60 x 60</a>
<div class="ads-inner">
<h5 class="ads-title"><a title="Responsive Portfolio WordPress Theme" href="http://bit.ly/cm-simplex">DW Simplex</a></h5>
<span class="ads-meta">Ads by <a title="Responsive WordPress Themes" href="http://designwall.com">DesignWall</a></span>
</div>
</div>
</div>

</aside>
<aside class="widget widget_text span4" id="text-20">
<div class="textwidget"><div class="ads ads-230x60">
<a title="Responsive One Page WordPress Theme" href="http://bit.ly/ZgNf6q" class="ads-thumb">230 x 60</a>
<span class="ads-meta">Ads by <a title="Responsive WordPress Themes" href="http://designwall.com">DesignWall</a></span>
</div>
</div>
</aside>
</div>

2. Add following code to Custom wp_head() in Dashboard /  Appearance / Customize

<style>
.widgets-sidebar-header {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
@media (min-width:1080px) {
.widgets-sidebar-header {
padding-left: 21px;
}
}
.site-header #branding a {
height: 80px;
}
</style>

That’s done, save it and refresh the site, then go to front-end to see how that goes 🙂
Hope this helps!

Anthony
answered 10 years ago

Thanks, Wilfred. This is very helpful: the border line between the logo and the text widgets is now showing, and the header becomes shorter with the bottom aligning. But as you can see again from my test site at http://bit.ly/UvpB5K, there is still redundant margin to the right side of the logo in full laptop/desktop view.
If I understand correctly, the original DW Focus 1.0 header was so designed that:
1. in full laptop/desktop view,
a) all 4 “spans” (3 text widgets and the logo) are of approximately the same width (yes, only approximately); and
b) the first 2 text widgets (asides id text-25 & text-26) in the middle are of exactly the same width, while the logo and the 3rd text widget (text-20) on the outside are of exactly the same width;
2. in tablet/iPad view,
a) all 3 text widgets are of approximately the same width (again, only approximately); and
b) the 1st and 3rd text widgets (id text-25 & text-20) are of exactly the same width, leaving the logo to the top.
Again, this pixel-precise design is what I like most about DW Focus (1.0) and am trying to recreate here. Any tips? Your help is much appreciated in advance. Thanks.

Anthony
answered 10 years ago

Sorry for the extended question, but to make it simpler, is there any way to re-use at least part of the original DW Focus 1.0 CSS that is relevant to the header in order recreate EXACTLY that “logo + 3 text widget” design? Thanks. 
 
P.S. This is the older test demo (DW Focus 1.0) I uploaded back then: http://bit.ly/SSJwKi If you close the frames (top right) and compare it side by side with http://bit.ly/UvpB5K, you can see the difference. 

DominicStaff
answered 10 years ago

Hi Nameslave, Tosidebar header like version 1.0, you can try this solution: 1. Log in to Dashboard > Appearance > Widget > add the Text widget to Header section, then add the following code to the Text widget:

<div class="row widgets-sidebar-header">
<aside class="widget widget_text span3" id="text-25">
<h3 class="widget-title">Sponsor link</h3>
<div class="textwidget">
<div class="ads ads-60">
<a title="Multi Grids Responsive with JigoShop" href="http://bit.ly/tf-wallclassic" class="ads-thumb">60 x 60</a>
<div class="ads-inner">
<h5 class="ads-title"><a title="Multi Grids Responsive with JigoShop" href="http://bit.ly/tf-wallclassic">WallClassic</a></h5>
<span class="ads-meta">Ads by <a title="Responsive WordPress Themes" href="http://designwall.com">DesignWall</a></span>
</div>
</div>
</div>
</aside>

<aside class="widget widget_text span3" id="text-26">
<h3 class="widget-title">Sponsor link</h3>
<div class="textwidget"><div class="ads ads-60">
<a title="Responsive Portfolio WordPress Theme" href="http://bit.ly/cm-simplex" class="ads-thumb">60 x 60</a>
<div class="ads-inner">
<h5 class="ads-title"><a title="Responsive Portfolio WordPress Theme" href="http://bit.ly/cm-simplex">DW Simplex</a></h5>
<span class="ads-meta">Ads by <a title="Responsive WordPress Themes" href="http://designwall.com">DesignWall</a></span>
</div>
</div>
</div>

</aside>
<aside class="widget widget_text span3" id="text-20">
<div class="textwidget"><div class="ads ads-230x60">
<a title="Responsive One Page WordPress Theme" href="http://bit.ly/ZgNf6q" class="ads-thumb">230 x 60</a>
<span class="ads-meta">Ads by <a title="Responsive WordPress Themes" href="http://designwall.com">DesignWall</a></span>
</div>
</div>
</aside>
</div>

2. Add following code to Custom wp_head() in Dashboard /  Appearance / Customize

<style>
.widgets-sidebar-header {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
@media (min-width:1080px) {
#sidebar-header {
position: relative;
}
#sidebar-header:before {
content: '';
position: absolute;
left: -20px;
height: 100%;
width: 1px;
background: #ddd;
}
}
.site-header #branding a {
height: 80px;
}
</style>
Anthony
answered 10 years ago

Thanks, Dominic. It’s getting really like the original DW Focus (1.0), finally. 😉

Powered by DW Question & Answer Pro