Hello There, Guest!
View New Posts  |  View Today's Posts
Need expert help improving site theme

  • 0 Vote(s) - 0 Average


03-03-2013, 12:11 PM #1
Nuno Brito
Team Reboot
Team Reboot
Posts: 351 Threads:13 Joined: Aug 2011 Reputation: 10

Need expert help improving site theme
Hello my friends,

We had a competition at reboot last year to say farewell to Windows 7. This year to commemorate Windows 8 I've introduced a metro-like theme on the site.

I'm working to adjust the new theme but there are some points that my rudimentary CSS skills are unable to address:
- There are some validation errors present
- The header needs some fixing (gets misaligned when logged with a longer name like mine)
- I tried to make adsense blend like a metro-app but the result is nowhere good..
- Could use some improvements on the look&feel

Would someone be willing to volunteer and help getting these things sorted?

:)
Want to help TLF? Place tech.reboot.pro on your signature around the web. Let's help TLF grow! :)

03-03-2013, 01:14 PM #2
Epixors
(づ。◕‿‿◕。)づ・。*。✧・゜゜・。
*****
TLF Coders
Posts: 420 Threads:58 Joined: Aug 2012 Reputation: 6

RE: Need expert help improving site theme
I‘ll try to take a look ASAP

03-03-2013, 09:17 PM #3
KoBE
¯\_(ツ)_/¯
******
Global Moderators
Posts: 4,863 Threads:495 Joined: Jun 2011 Reputation: 67

RE: Need expert help improving site theme
I tried to using Nuno Brito, but didn't notice anything.


Is this what you were talking about though:


If so, I've tried fixing it like this:


To manage that fix, I simply added two more <li> tags and set their width to 300px (the width of the div it sits in)

Here's the HTML for the div with the two added <li> tags
Code:
<div id="user_navigation" class="logged_in">
    <ul class="ipsList_inline left">
        <li><a id="user_link" href="http://reboot.pro/user/53869-kobe/" title="Your Profile" class="" style="">Really long username<span id="user_link_dd"></span></a></li>
        <li style="width: 300px;"></li>
        <li style="width: 300px;"></li>
        <li style="margin-left: 8px;"><a data-clicklaunch="getInboxList" id="inbox_link" href="http://reboot.pro/index.php?app=members&amp;module=messaging" title="Messenger">&nbsp;</a></li>
        <li><a data-clicklaunch="getNotificationsList" id="notify_link" href="http://reboot.pro/index.php?app=core&amp;module=usercp&amp;area=notificationlog" title="Notifications">&nbsp;</a></li>
        <li id="nav_explore" class="nav_explore2">
            <a href="http://reboot.pro/index.php?app=core&amp;module=search&amp;do=viewNewContent&amp;search_app=forums" accesskey="2"><img src="http://reboot.pro/public/style_images/metro/icon_newcontent.png" title="View New Content"><!--View New Content--></a>
        </li>
        <li class="nav_explore2">
            <a href="http://reboot.pro/index.php?app=core&amp;module=global&amp;section=navigation&amp;inapp=forums" rel="quickNavigation" accesskey="9" id="quickNavLaunch" title="Open Quick Navigation"><span>&nbsp;</span></a>
        </li>
    </ul>
</div>

Also, I think the drop down after clicking the name could use some color. Perhaps match the headers below it.


I didn't notice any adsence errors either. Can you provide screenshots of the things you're talking about?

03-03-2013, 10:22 PM #4
AceInfinity
Developer
*******
Administrators
Posts: 9,721 Threads:1,025 Joined: Jun 2011 Reputation: 76

RE: Need expert help improving site theme
I think he means W3C validation: http://validator.w3.org/check?uri=http%3...ne&group=0

From what it looks like some spans need to be closed with '/', and img tags need an alt attribute to fix a good ~70% of the errors.

Adding alt attributes to images also is good for SEO.

To me, with my username after being logged in though, things are looking good. It's a colorful "Design Style" styled page that's for sure :). The colors seem to reflect usable "Design Style" colors though.

How about some hover effects on the buttons under the username dropdown in the top right? :) They could start off black, and change to white, or vice versa. I adopted a Windows 8 style for one of my newer domains as well as soon as I finish my project.
This post was last modified: 03-03-2013, 10:26 PM by AceInfinity.


Microsoft MVP .NET Programming - (2012 - 2018)
Automation Programmer
 ▲
 ▲ ▲

03-04-2013, 09:22 AM #5
Nuno Brito
Team Reboot
Team Reboot
Posts: 351 Threads:13 Joined: Aug 2011 Reputation: 10

RE: Need expert help improving site theme
Hi Friends, thanks for helping.

Ace and KoBE, I've added you both on the admin team with permission to directly edit the site themes. Just add /admin to the main URL and log with your account details.

This is what I see (clean cache):

Google Chrome


Firefox:


Opera:


In KoBE's screenshot all looks good, even when trying my user name. But I really don't know why on my side the end result is this one.

I have a request, the ads are too close to the logo. Would any of you be able of pulling down the adsense until the bottom of the blue bar? I've tried doing this but the result is scary to say the least.. :)

Thanks for helping!
This post was last modified: 03-04-2013, 09:23 AM by Nuno Brito.
Want to help TLF? Place tech.reboot.pro on your signature around the web. Let's help TLF grow! :)

03-04-2013, 10:10 AM #6
AceInfinity
Developer
*******
Administrators
Posts: 9,721 Threads:1,025 Joined: Jun 2011 Reputation: 76

RE: Need expert help improving site theme
It shouldn't be too difficult to move that advertisement placeholder down a notch... Although, what I see in both chrome and opera is that the search bar is at the bottom of the yellow box, and in firefox, it is in a decent place, but it kind of interferes with "ModeratorCP".

edit: Did you fix that already?


I'm on Firefox 19.0.1. Checking in IE, Opera, and Chrome right now...

edit: Nope... IE still shows that at the very bottom.

edit: After typing in the search in IE, I noticed the actual width of the text field is pretty narrow compared to the visible width of the container.


This is fixed now. I changed the width for #main_search in the CSS.

edit: I fixed the placement vertically for the search field across different browsers, leaving a bit of space at the bottom so it's not all the way at the bottom anymore.



That should be fairly good now. I'll look at the Ad placement now.

edit: Got the ad placement down, having issues with it messing up the vertical alignment of #branding2 though. IE and Firefox are good, Chrome it is a bit out of alignment.

edit: Fixed everything with Chrome, IE, and Firefox. Checking Opera right now.

edit: Here is how it now looks for IE, Chrome, and Firefox: *This screenshot was from IE


But for Opera, the alignment of the box on the right hand size is off... :


That's as far as I got it so far.

NOTE: I am not seeing the google ads because of plugins I have on certain browsers on my computer. IE is the only one I don't use/don't care about, so I haven't modified it very much.
This post was last modified: 03-04-2013, 11:18 AM by AceInfinity.


Microsoft MVP .NET Programming - (2012 - 2018)
Automation Programmer
 ▲
 ▲ ▲

03-04-2013, 12:58 PM #7
Nuno Brito
Team Reboot
Team Reboot
Posts: 351 Threads:13 Joined: Aug 2011 Reputation: 10

RE: Need expert help improving site theme
It is really complicated isn't it? Perhaps it would help to just divide the bar in two parts with a DIV? Sometimes I miss the old days when you didn't had to test a site in 5 different browsers..

Btw: great work with the adsense. :)
This post was last modified: 03-04-2013, 12:59 PM by Nuno Brito.
Want to help TLF? Place tech.reboot.pro on your signature around the web. Let's help TLF grow! :)

03-04-2013, 04:15 PM #8
Nuno Brito
Team Reboot
Team Reboot
Posts: 351 Threads:13 Joined: Aug 2011 Reputation: 10

RE: Need expert help improving site theme
I've tested again with a clean cache and logged with my acount (all javascript run without constraints).

Opera and IE8:
Working as expected

Firefox, Chrome:
Adsense causes the orange bar to go down

Maybe it is my screen resolution? My laptop has a 1366x768 resolution. 

On http://reboot.pro/files you will see that the orange box also goes down, but I believe this happens because the title inside the search bar on the orange box is larger.

I'm an opera user, so at least for me it is working superbly. On the site I track that around 77% of visitors use either Firefox or Opera.

Thanks for helping. :)
This post was last modified: 03-04-2013, 04:16 PM by Nuno Brito.
Want to help TLF? Place tech.reboot.pro on your signature around the web. Let's help TLF grow! :)

03-04-2013, 04:56 PM #9
KoBE
¯\_(ツ)_/¯
******
Global Moderators
Posts: 4,863 Threads:495 Joined: Jun 2011 Reputation: 67

RE: Need expert help improving site theme
Hey guys, I just got out of classes. I don't want to touch anything until I'm caught up to speed (that way I don't mess somebody's work up).

I notice that in both Chrome and Firefox I'm getting this:


To fix that you'd need to remove the special #branding CSS applied at Lines 468 (firefox) and 476 (chrome). I would make the change, but I don't want to attempt to change something while either of you are editing.

This post was last modified: 03-04-2013, 04:58 PM by KoBE.

03-04-2013, 05:04 PM #10
KoBE
¯\_(ツ)_/¯
******
Global Moderators
Posts: 4,863 Threads:495 Joined: Jun 2011 Reputation: 67

RE: Need expert help improving site theme
I'd also add margin-left:6px; to the div that contains the adsense. To center it a bit.





Forum Jump:


Possibly Related Threads...
Thread Author Replies Views Last Post
  Domain Parking or Content site (WP8Dev KoBE 2 1,716 05-28-2015, 09:56 AM
Last Post: KoBE
  How important are your site's statistics? Adriana 2 1,733 01-18-2013, 03:12 AM
Last Post: Adriana
   XSS Cross Site Scripting 1912Dummy 22 9,346 07-07-2012, 10:52 PM
Last Post: rsnerd445
  Computer Desktop Site - Incredibly Unique Website! AceInfinity 3 2,472 05-03-2012, 08:59 PM
Last Post: AceInfinity
  Link shortening site? Predator 9 5,705 05-01-2012, 09:56 AM
Last Post: Spirit


Users browsing this thread: 1 Guest(s)