Awake Responsive questions

(33 posts) (15 voices)

  1. zen_laden
    Member

    Hello,

    Really nice job this responsive update. Happy to be one of your consumer.

    So new update new trouble ... please i need some help :

    - Logo : Can we change the logo in responsive ?:
    I see : .mysite_responsive .logo{left:0;} but can i change logo or the size of the logo when website is resize ?
    My old one is to big for little screen and he dont resize

    - For user can we give us the choice between classic version and mobil version ?

    - The Jcarousel's not working anymore in Ipad and Iphone.
    How to fix it ?

    - Is possible to change slider only for mobil and have the normal fading for other classic computer ?

    - on my computer when i resize and i look responsive menu i see difference between menu and sub menu but not in Iphone and Ipad . You know hoh to fix it ?

    Thanks :)

    Posted 5 years ago #
  2. Elliott
    Support

    Hello zen_laden,

    1. Open up /wp-content/themes/[your_theme]/header.php and on line 31 you should see this,

    <div id="header_inner">

    On the next line add this,

    <?php global $mysite; if( isset( $mysite->mobile ) ) { echo '<img src = "URL to your logo" />'; } ?>

    And then add this in Dashboard -> your theme -> Responsive & Mobile -> Mobile Custom CSS,

    .mysite_responsive .logo { display: none !important; }

    2. You mean like a form that switches between the two? No not currently. We will look into getting something added.

    3. We disabled it in Dashboard -> your theme -> Responsive & Mobile.

    4. There are options for this in Dashboard -> your theme -> Responsive & Mobile.

    5. Take a screenshot and highlight the area so we can get a better idea of what's going on.

    Posted 5 years ago #
  3. ArtemisGordon
    Member

    Almost There.

    Great fix, except the Mobile logo is centered on the phone and I can't seem to find anyway to force it to the left

    Posted 5 years ago #
  4. ArtemisGordon
    Member

    Also: The Mobile Logo is now NOT a link back to the Home Page.
    Strange how this would disable this option. Thoughts on enabling Logo link on Mobile site?

    Posted 5 years ago #
  5. Elliott
    Support

    You would just surround it with a link to your homepage,

    <?php global $mysite; if( isset( $mysite->mobile ) ) { echo '<a href = "URL to your homepage"><img src = "URL to your logo" /></a>'; } ?>

    Send us a link to your page.

    EDIT: Please don't double post.

    Posted 5 years ago #
  6. ArtemisGordon
    Member

    I am sorry about double posting. Will not happen again.

    I actually partially solved a few issues right before your note:

    Link to test location: http://newyearsneedham.org/wordpress/sample-page/

    I fixed the centering issue by adding: class="mobile_logo" with appropriate margin changes to style.css

    My link is a HARD coded link, but my location is a temporary location for design purposes.
    How would I change this (http://newyearsneedham.org/wordpress) to a relative HOME link?

    { echo '<img src = "http://newyearsneedham.org/wordpress/wp-content/uploads/2012/09/NewYearsNeedham-Mobile-logo.png" />'; } ?>

    Posted 5 years ago #
  7. Elliott
    Support

    Try this,

    <a href = "'.get_bloginfo("siteurl").'">

    That will grab the site URL for whatever Wordpress installation it's used on.

    Posted 5 years ago #
  8. ArtemisGordon
    Member

    I may go and buy the Bundle Price, even though I am not sure if will you use the other themes anytime soon because you guys are awesome!

    One last thing and then I am good for a while:
    How do I get rid of this shadowing effect on the Title and Title Teaser and also I do not seem to have control over the Title Color?
    http://newyearsneedham.org/wordpress/sample-page/

    Posted 5 years ago #
  9. Elliott
    Support

    Try this out, http://mysitemyway.com/docs/index.php/Awake_Cufon_colors.

    I didn't see any CSS for text shadows so maybe that will get rid of it also.

    Posted 5 years ago #
  10. ArtemisGordon
    Member

    Cool!. I saw those listings but was hesitant because I did not see the CSS connection.
    YES, That Worked.

    Posted 5 years ago #
  11. On the #3 answer above, it is unclear if this function now works in Awake Responsive. I have all the Disable boxes unchecked, and still cannot get jCarousel portfolios to function... ?

    Posted 5 years ago #
  12. Elliott
    Support

    Send us a link and let us know what device your using.

    Posted 5 years ago #
  13. Elliott
    Support

    Are you using it in the custom homepage text editor or include an additional page which is using it?

    Posted 5 years ago #
  14. attached are screens of both desktop & iPad views currently.
    Desktop functikons fine, iPad it's invisible.

    Attachments

    1. Screen_Shot_2012-10-05_at_12.16.01_PM..png (80.2 KB, 4 downloads) 5 years old
    2. 2012-10-05_12.16.49.png (102.4 KB, 2 downloads) 5 years old
    3. Screen_Shot_2012-10-05_at_12.14.20_PM..png (41 KB, 4 downloads) 5 years old
    4. Screen_Shot_2012-10-05_at_12.14.13_PM..png (118.4 KB, 12 downloads) 5 years old
    5. Screen_Shot_2012-10-05_at_12.13.54_PM..png (88.7 KB, 9 downloads) 5 years old
    6. Screen_Shot_2012-10-05_at_12.13.45_PM..png (128 KB, 11 downloads) 5 years old
    Posted 5 years ago #
  15. Elliott
    Support

    Send us a private message by clicking on the "PM this user" link beneath our usernames and include a link to your page, a Wordpress login, and a quick description of the problem.

    Posted 5 years ago #
  16. jwellsmusic
    Member

    Sorry to revive an old post. But Having an issue with getting our "mobile" logo left justified... not sure we are advanced enough to code this.

    Thanks!

    jwellsmusic.com <--- Logo seems to be almost centered.

    Posted 4 years ago #
  17. omnixas
    Member

    Why can we not simply edit the main .logo url in the style-sheet to something like:

    Technically, the following code should work! However, you guys have coded the "width-x-height" of the uploaded custom logo somewhere that is seemingly difficult to trace. Would you please update the code for the different themes so we can us a simple code like this on our uploaded logos?

    .logo (
    max-width: 100%;
    height: auto;
    )

    That would automatically set the image to it's default "width-x-height" ratio when the screen is large enough and then it would automatically shrink it down to whatever size necessary when the screen is smaller. Keep it simple.

    Having to add PHP code, then custom css code to swap images and then, re-linking those images, etc... is a head ache.

    Posted 3 years ago #
  18. omnixas
    Member

    typo on the brackets:

    Posted 3 years ago #
  19. Elliott
    Support

    If you want to use that CSS then you can add it in Dashboard -> your theme -> General Settings -> Custom CSS.

    Posted 3 years ago #
  20. omnixas
    Member

    yes, but it doesn't work... Technically, it should. You have the themese coded in such a way that it doesn't however.

    Posted 3 years ago #
  21. omnixas
    Member

    This needs to be fixed - now. Please include this in your next update of the framework.

    Posted 3 years ago #
  22. snowbrd103
    Member

    In case anyone needs the rest of that truncated line of code, I think it's:

    <?php global $mysite; if( isset( $mysite->mobile ) ) { echo '<img src = "URL to your logo" />'; } ?>

    Posted 3 years ago #
  23. Hi
    I followed these steps and read through the entire thread but I'm still missing something.
    My desktop logo isn't showing now =(
    I added this to Custom CSS:
    #primary_menu { top: 56px !important; }

    .mysite_responsive .logo { display: none !important; }

    And this is the header.php

    ?><div id="header">
    		<div id="header_inner">
    		<!-- SelfAdded -->
    		<?php global $mysite; if( isset( $mysite->mobile ) ) { echo '<a><img src = "http://alkhateeb.se/wp-content/uploads/2014/01/Logo.png"  width = "100%" align = "center" /></a>'; } ?>
    		<!-- SelfAdded End -->
    		<?php mysite_header(); 
     
    		?></div><!-- #header_inner -->
    	</div><!-- #header -->

    And link to website: http://www.alkhateeb.se/
    Thanks

    Posted 3 years ago #
  24. Nevermind fixed the problem. I added this line below my original edit:

    <?php global $mysite; if( !isset( $mysite->mobile ) ) { echo '<a><img src = "http://alkhateeb.se/wp-content/uploads/2014/01/Logo.png" /></a>'; } ?>
    in the Header.php

    Then i adjusted the margin to top through custom CSS with something like this:
    #header_inner {top:28px; !important; }
    #primary_menu { top: 0px !important; }

    Posted 3 years ago #
  25. gungus
    Member

    alkhateeb's post with the added parameter width="100%" was what I was looking for to have the logo to resize on different mobiles and not be static to fixed width above the menu (using theme Dejvavu).
    My issue now is that the logo needs some extra space ,so I added #header { height: 145px !important; } in General CSS.
    But for mobile CSS the value needs to be changed for iPhone, Ipad etc and not be static.
    Does anyone have a solution for that?

    Posted 3 years ago #
  26. sandjanice
    Member

    I tried this css thinking that perhaps it would work for the responsive logo:
    .mysite_responsive .logo {
    max-width: 100% !important;
    height: auto !important;
    }

    Unfortunately, it did not:-( BTW, I am using the Modular theme.

    I too would like to be able to control this via css instead of code since when you resize the image to fit an IPhone, it is too small for the IPad. And visa versa, if you resize it to fit and IPad, it is too large the the IPhone.

    Would love for this to be something added to your updates.

    Posted 3 years ago #
  27. DaveRoseberry
    Member

    Still having issues with header if anyone can help

    Posted 3 years ago #
  28. lmm314
    Member

    Im having the same logo problem using Elegance (the latest version). I think all the themes are coded for tiny logos :(

    Posted 3 years ago #
  29. 32Degrees
    Member

    < rant >
    Are you planning on implementing a better way to have a mobile responsive logo without having to hack the header.php and add additional custom mobile css just to get it to work?

    I am using the latest available version of both WordPress and the Awake theme.

    I've followed the instructions above (most other posts lead to this one) and it looks like I will have to spend more time trying to get this basic 'feature' to work properly.

    I've been using your themes with great success over the years but now I'm having to turn once non-responsive websites into responsive ones – it's practically a given for websites now, whether I like it or not – so having a no-fuss responsive logo should be a given.

    As I have also purchased the theme bundle, is this issue the same for all of your themes?

    < / rant >

    For the most part, turning the websites responsive is working well... this logo thing though...

    Posted 2 years ago #
  30. farnell
    Member

    I was able to fix this issue, and allow the logo to be mobile responsive, by adding this CSS to my child-theme CSS with the Awake Theme:

    /*Let logo scale down with small screen*/
    .logo, .logo img {
    max-width: 100%;
    height: auto;
    }

    I'm guessing it would work when placed in the custom CSS section, too.

    Cheers.

    Posted 2 years ago #
  31. oinkaroonie
    Member

    Farnell's method didn't work for me. I did this.

    First figure out the percentage of the header your logo takes up. Mine's 813 pixels wide, and the header area is 960px, so mine takes up almost 85%.

    Then add this to the mobile responsive CSS (substituting your width percentage for the "85"):

    .mysite_responsive .logo {width: 85vw !important; height: auto !important;}

    The "vw" sizes it to the "virtual window", that is, whatever size the browser has made the header area.

    Additionally, if your logo is overlapping the social icons, you can turn them off with

    .header_social {display: none;}

    This doesn't require any header.php rewrite or use of a smaller logo image.

    Posted 1 year ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme