× Got a CSS, HTML or webdesign question? Ask it here!

Semi-Responsive Theme - Mobile Size Header Trouble

2 years 1 month ago #14887 by paradoxsc
So I recently switched from a worn out cluttered DN stock theme to a semi responsive theme, that I found the super old code for, on the forums somewhere. I have been tweaking everything with CSS to try and get it looking a bit better. Here is a link:

ParadoxPrints.com

My issue is that the header looks atrocious on mobiles and it isn't really clear that the little button on the top left prompts a dropdown navigation/pages menu. I'd like some text added to that area to help guide mobile visitors maybe like "MENU" or "WEBSITE PAGES". I would also like to clean up the "login/register" fields by removing the grey background, centering, and styling the links to the theme, also add a cart link/sprite img and possibly make the phone number bold. I'm having issues accessing the right bits of code to alter. Firebug is my only resource for live editing/preview. In the "customize html" section of the site, its just a generic callback template style, so I don't really know where to access that code or if it is even possible with DN.



Attachments:

Please Log in or Create an account to join the conversation.

2 years 1 month ago - 2 years 1 month ago #14922 by paradoxsc
UPDATE: I managed to fix this using four blocks of CSS and by uploading a new sprite img that I edited in corel photopaint. No one ever responded so I started messing with my hard code, not smart, I know. Anyways the 4 blocks of code to alter on Brenden's old "semi-mobile responsive theme" are #pre_navigation a / #pre_navigation.hub li / #pre_navigation.hub li a / and ul.extras.hub.............Also, the sprite image to edit is located at #navigation_wrapper a.nav-open. I hope this info helps someone who is like me, a full time printer and 4am web developer. Looks a lot better now, see below, not perfect but she'll do for the time being.

Attachments:

Please Log in or Create an account to join the conversation.

2 years 1 month ago #14923 by Sewsublime
Looks great, have you managed to do anything when the customer logs in as mine goes a bit pear shaped then.

Cheers Daren

Please Log in or Create an account to join the conversation.

2 years 1 month ago - 2 years 1 month ago #14928 by giftswp
Is looking good, I was planing to help you when I had a little more free time, it looks like I'm using the same theme code base as you.

To reveal the cart/basket, search and social buttons you need to find them under this rule @media (max-width: 480px) , by default they are disable with the tag "display none" look for it and remove them so it will reveal and then work with them by positioned them anywhere you like etc.

To find things quicker I use the find function on the browser by hitting Ctrl+F then enter a keyword and it will find it for me, I do this while in the Custom CSS template page.

I you need anything specific let me know and I'll try to help.

Ruben
The one that does not ask, does not learn

Please Log in or Create an account to join the conversation.

2 years 1 month ago #14930 by Tommy

paradoxsc wrote: UPDATE: I managed to fix this using four blocks of CSS and by uploading a new sprite img that I edited in corel photopaint. No one ever responded so I started messing with my hard code, not smart, I know. Anyways the 4 blocks of code to alter on Brenden's old "semi-mobile responsive theme" are #pre_navigation a / #pre_navigation.hub li / #pre_navigation.hub li a / and ul.extras.hub.............Also, the sprite image to edit is located at #navigation_wrapper a.nav-open. I hope this info helps someone who is like me, a full time printer and 4am web developer. Looks a lot better now, see below, not perfect but she'll do for the time being.


Hi Paradoxsc, I wish I had more time to give you specific advice, but i don't

However, you are on track. Don't wait for Deco and don't be afraid to edit html & css - you must. Using to Brendens code only gets you part way. I basically used 2-3 lines of Deco code then figured out the rest on my own.

While not perfect, I believe we have just about every page, including login, register, designer, checkout, etc looking good on mobile. Keep in mind making it work on everything is NOT easy. Even the the biggies, like Customink and others I see fail sometimes.

The best way to learn is copy. So feel free to check our css & html for 2 sites we have mobile friendly.

www.terrifict.com
www.fundraisertee.com

- Good Luck
Tommy

Please Log in or Create an account to join the conversation.

2 years 1 month ago #14938 by paradoxsc

Sewsublime wrote: Looks great, have you managed to do anything when the customer logs in as mine goes a bit pear shaped then.

Cheers Daren


I honestly haven't even set up a testing customer account yet. I just added it to my list of things to address though. I have so much that still needs fixing on this new theme, I'm pretty much in the cosmetic phase now, just making sure it looks ok at first glance. I just went live with this site a week or two ago and have been raising support tickets like crazy trying to nail everything down.

I will be diving deeper into the code shortly and when I tackle the logged-in customer view I will post my results for you. Thanks!

Please Log in or Create an account to join the conversation.

2 years 1 month ago #14939 by paradoxsc
@ Tommy & Giftswp

Thanks for the tips and the feedback! I appreciate it.

Please Log in or Create an account to join the conversation.

Time to create page: 0.392 seconds
Powered by Kunena Forum

Latest from our blog

DecoNetwork 8 - Update 3: GDPR Compliance (+56 tasks completed)

DecoNetwork 8 - Update 3: GDPR Compliance (+56 tasks completed) In this release, DecoNetwork updated its Privacy Policy and Terms of Use, effective May 23, 2018. These changes were made primarily in preparation...Read More

This Week in Catalog - May 18, 2018

This Week in Catalog - May 18, 2018 I have two big announcements to make in regards to the DecoNetwork catalogs. We read and listen to your complaints and suggestions. Recently, I...Read More

DecoNetwork 8 - Available Now!

DecoNetwork 8 - Available Now! After an incredible amount of work in design, development, and testing, DecoNetwork 8 is here! With version 8, we recommitted ourselves...Read More

This Week in Catalog: May 11, 2018

This Week in Catalog: May 11, 2018 Lately, we've been getting a lot of new products in each week. More than is typical. All those new products (mostly in the S&S Activewear...Read More

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75 tasks implemented)

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75  tasks implemented) DecoNetwork 8 was released just ten days ago, but we have already a second update (8.002) available for you with many improvements and fixes...Read More