WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] Mantra theme design (51 posts)

  1. shdaniyal
    Member
    Posted 1 year ago #

    this is my website --> oasis.pk
    Im using Mantra theme..

    I want to move the Search bar a little upward so that it can align with the top Menu . how can I do that ? :(

    and under the PAGES section , I want the pages to be displayed like they are displyed in this website http://www.cbr.gov.pk/

    so that a vertical menu is formed on the left hand side.
    at the moment only links of the pages are being displayed..I want to display a proper Menu, that if we hover on it, its sub pages also display ....
    plzz help me on this project of mine :(

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try using a browser developer tool for this kind of exploratory CSS work.
    I used Google Chrome's built-in Developer Tool just because I find it particularly easy to expose underlying HTML and CSS as compared to Firebug.

    Now that you know the style, from being exposed/added by the Developer Tool, you can add a new style to override it.

    You ought to add new styles externally, not within the theme's files. Changes to the theme's files will compromise the theme and be compromised when the theme updates.

    External changes can be made using a Child Theme or through a plugin that provides Custom CSS functionality.

    I recommend using the Jetpack plugin and its Custom CSS functionality to hold your CSS modifications.

  3. shdaniyal
    Member
    Posted 1 year ago #

    there's an option in this to theme...to add Custom CSS...i just want to know which part off CSS should I add where so that the Search box aligns with the upper menu

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Then it sounds as though you'll need the support of a CSS forum like CSS Creator.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It does not look like you can move the search up using CSS -- because it's in the sidebar element. Sometimes it will work to put a negative top margin in that kind of situation, but I tried it and it got cut off. So you'd likely have to move the search box into the header.php file. To do that, you'd first need to have a child theme set up.

  6. shdaniyal
    Member
    Posted 1 year ago #

    yeah I added the search box code in the header.php.....
    now I have a second issue...i.e i need to add border on the left and right side of the page..so that it can meet with the footer at the bottom of the page.....

    how would I add that border ?? .. i tried in the CSS but i cant seem tp solve the problem....
    i have added a custom css to show a transparent background, is that the problem its not showing the border ?

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Sorry, but you really need to go back and create a child theme. Making changes to theme files is not a good way to go -- all your changes will be lost when the theme is updated. Believe me, you really don't want to deal with that down the road.

    http://codex.wordpress.org/Child_Themes

  8. shdaniyal
    Member
    Posted 1 year ago #

    what if I dont update the theme ... then ?

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your server may update the theme automatically, in which case you'll need to buy a new hosting service.

    We're really not comfortable advising you to go down the route of migraines when not using a Custom CSS plugin or a Child Theme.

  10. shdaniyal
    Member
    Posted 1 year ago #

    while creating the child theme , do I have to add the CSS file? ....or the Header.php file in which I did the modification ??

  11. shdaniyal
    Member
    Posted 1 year ago #

    look ..there's an potion of Custom CSS within the theme

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry, you'll need a Child Theme for this modification.

  13. shdaniyal
    Member
    Posted 1 year ago #

    okay...im crating the child theme...but tell me this...
    example: i have mantra-childtheme
    in this directory ,will i add the header.php and then make changes to it ?

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    That is correct.

  15. shdaniyal
    Member
    Posted 1 year ago #

    okay

    that means...if I have to modify any php file...I would add the original php file in this directory and then make changes to it ...right ?

    and code similar to this one will be added at the top of every php file //right ? .

    /*
    Theme Name:     Twenty Twelve Child
    Theme URI:      http://example.com/
    Description:    Child theme for the Twenty Twelve theme
    Author:         Your name here
    Author URI:     http://example.com/about/
    Template:       twentytwelve
    Version:        0.1.0
    */
  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    that means...if I have to modify any php file...I would add the original php file in this directory and then make changes to it ...right ?

    Absolutely.

    and code similar to this one will be added at the top of every php file //right ? .

    No, that should just be in your Child Theme stylesheet (style.css).

  17. shdaniyal
    Member
    Posted 1 year ago #

    okay thanks...

  18. shdaniyal
    Member
    Posted 1 year ago #

    I have added the modified header.php in the mantra-child but it doesnt read it ,and reads the header.php which is in the parent theme :/

  19. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you provide a link to your webpage? We may be able to determine whether your Child Theme is being loaded.

  20. shdaniyal
    Member
    Posted 1 year ago #

    oasis.pk

  21. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your Child Theme is not loading, have you activated it through the dashboard?

  22. shdaniyal
    Member
    Posted 1 year ago #

    oh..how do we activate it through the dashboard ? :/

  23. Andrew
    Forum Moderator
    Posted 1 year ago #

    It should be in Appearance → Themes

  24. shdaniyal
    Member
    Posted 1 year ago #

    oh ..now I have activated it .but now my header image is gone :(

  25. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can grab a copy of the header.php file from your actual theme again, then paste it over your Child Theme header.php file (overwrite it).

  26. shdaniyal
    Member
    Posted 1 year ago #

    I copied the entire code..but still the same problem ...
    here's the code from the parent theme that im pasting into the child theme

    <?php
    /**
     * The Header
     *
     * Displays all of the <head> section and everything up till <div id="main">
     *
     * @package Cryout Creations
     * @subpackage mantra
     * @since mantra 0.5
     */
     ?><!DOCTYPE html >
    <html <?php language_attributes(); ?>>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <?php  	cryout_seo_hook(); ?>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php
     	cryout_header_hook();
    	wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    
    <?php cryout_body_hook(); ?>
    
    <div id="wrapper" class="hfeed">
    
    <?php cryout_wrapper_hook(); ?>
    
    <header id="header">
    
    		<div id="masthead"> 
    
    			<div id="branding" role="banner" > 
    
    				<?php cryout_branding_hook();?>
    				<div style="clear:both;"></div>
    
    			</div><!-- #branding --> 
    
    			<nav id="access" role="navigation">
    
    				<?php cryout_access_hook();?>
    <?php $search_text = __( 'Search', 'mantra' ); ?>
    <form method="get" id="searchform"
    action="<?php echo home_url( '/' ); ?>/">
    <input type="text" value="<?php echo $search_text; ?>"
    name="s" id="s"
    onblur="if (this.value == '')
    {this.value = '<?php echo $search_text; ?>';}"
    onfocus="if (this.value == '<?php echo $search_text; ?>')
    {this.value = '';}" />
    <input type="submit" id="searchsubmit" value="OK" />
    </form>
    
    			</nav><!-- #access -->
    
    		</div><!-- #masthead -->
    
    	<div style="clear:both;"> </div>
    
    </header><!-- #header -->
    <div id="main">
    	<div  id="forbottom" >
    		<?php cryout_forbottom_hook(); ?>
    		<div style="clear:both;"> </div> 
    
    		<?php cryout_breadcrumbs_hook();?>

    [In future, please wrap your code in one backtick at the start and one backtick at the end]

  27. shdaniyal
    Member
    Posted 1 year ago #

    I think its maybe because there's an option in the theme that allows you to add the header and change its size :/ :S

  28. Andrew
    Forum Moderator
    Posted 1 year ago #

    So, if you remove header.php from your Child Theme, the header image problem persists? If so, the issue is in your Child Theme stylesheet.

  29. shdaniyal
    Member
    Posted 1 year ago #

    yes it does

    but I copied the entire CSS from the parent stylesheet

  30. Andrew
    Forum Moderator
    Posted 1 year ago #

    You shouldn't need to do that, but instead use the CSS import function as exampled here http://codex.wordpress.org/Child_Themes#Example_of_a_basic_Child_Theme

    Otherwise you'll be duplicating code and it'll be harder to debug which CSS is causing the issue.

Topic Closed

This topic has been closed to new replies.

About this Topic