Solved

how to move images on website

Posted on 2013-11-06
12
364 Views
Last Modified: 2013-11-06
Hi Guys,

I was wondering how can i move images so the attached ones here are right of the logo? in the site  http://dancingsoul.greatlocks.ie/
logo3.png
logo4.png
0
Comment
Question by:jonathanduane2010
  • 6
  • 6
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39628317
Just add them after your logo div e.g.

<div id="logo">
<a href="http://dancingsoul.greatlocks.ie"><img alt="The Dancing Soul" src="http://dancingsoul.greatlocks.ie/wp-content/uploads/2013/11/top-logo.png"></a>
</div>

<img src="http://filedb.experts-exchange.com/incoming/2013/11_w45/686706/logo3.png">
<img src="http://filedb.experts-exchange.com/incoming/2013/11_w45/686707/logo4.png">

And add any margin you want to space them out.
0
 

Author Comment

by:jonathanduane2010
ID: 39628329
This is a wordpress site, so do i add in the index.php or in the css
0
 
LVL 58

Expert Comment

by:Gary
ID: 39628351
No in the header e.g.
wp-content/themes/classic/header.php
0
 

Author Comment

by:jonathanduane2010
ID: 39628393
hi,

i cant find the header.php in the root?

in wordpress this is what it looks like in the editor

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	
	<?php if(is_front_page() && of_get_option('home_title')): ?>
	<title><?php echo of_get_option('home_title'); ?></title>
	<?php else: ?>
	<title><?php bloginfo('name'); ?> <?php wp_title(' - ', true, 'left'); ?></title>
	<?php endif; ?>
	
	<?php if(is_front_page() && of_get_option('home_meta')): ?>
    <meta name="description" content="<?php echo of_get_option('home_meta'); ?>" /> 
	<?php endif; ?>
	
	<?php if(of_get_option('favicon')): ?>
	<link href="<?php echo of_get_option('favicon'); ?>" rel="shortcut icon" /> 
	<?php endif; ?>


	<?php wp_head(); ?>
	
	<?php if(of_get_option('custom_css')): ?>
	<?php echo '<style type="text/css">'; ?>
	<?php echo of_get_option('custom_css'); ?>
	<?php echo '</style>'; ?>
	<?php endif; ?>
	
	<?php if(of_get_option('custom_js')): ?>
	<?php echo '<script type="text/javascript">'; ?>
	<?php echo of_get_option('custom_js'); ?>
	<?php echo '</script>'; ?>
	<?php endif; ?>
	
	
	<?php echo '<style type="text/css">'; ?>
	/*====================================================
	Menu Background Color - Default: #454a52
	====================================================*/
	header, #header-top .sf-menu li li {background-color:<?php echo of_get_option('menu_bg_color', '#454a52'); ?>; } 
	
	/*====================================================
	Footer Background Color - Default: #454a52
	====================================================*/
	footer {background-color:<?php echo of_get_option('footer_bg_color', '#454a52'); ?>;}
	
	/*====================================================
	Link Color - Default: #7f7f7f
	====================================================*/
	a {color:<?php echo of_get_option('link_color', '#7f7f7f'); ?>} /* Default link  */
	a:hover { color:<?php echo of_get_option('link_color_hover', '#7f7f7f'); ?>} /* Default link:hover*/
	
	/*====================================================
	Heading Colors and Sizes - Default: #7f7f7f and Footer #ffffff
	====================================================*/
	h1, h2, h3, h4, h5, h6 {color:<?php echo of_get_option('heading_color', '#7f7f7f'); ?>;}
	footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {color:<?php echo of_get_option('footer_heading_color', '#ffffff'); ?>;}
	h1 { font-size: <?php echo of_get_option('h1_size', '28'); ?>px; } 
	h2 { font-size: <?php echo of_get_option('h2_size', '24'); ?>px; } 
	h3 { font-size: <?php echo of_get_option('h3_size', '16'); ?>px; }
	h4 { font-size: <?php echo of_get_option('h4_size', '15'); ?>px; } 
	h5 { font-size: <?php echo of_get_option('h5_size', '13'); ?>px; } 
	h6 { font-size: <?php echo of_get_option('h6_size', '11'); ?>px; }
	
	/*====================================================
	Fonts
	====================================================*/
	body {font-family:<?php echo of_get_option('body_font', '"Helvetica Neue"'); ?>, Helvetica, Arial, Sans-Serif;}
	h1, h2, h3, h4, h5, h6, nav a, ul.tabNavigation, .more-link-slider span, .post-details-slider, .button, .portfolio-details, .blog-details, .blog-pagination, .content-container-base-pagination, .home-page-older {font-family: <?php echo of_get_option('heading_font', '"Lato"'); ?>, Helvetica, Arial, Sans-Serif;  }
	
	/*====================================================
	Navigation Background and colors
	====================================================*/
	#navigation-narrow nav, #navigation-narrow .sf-menu li li,
	#navigation-wide nav, #navigation-wide .sf-menu li li
	{background-color:<?php echo of_get_option('narrow_navigation', '#ffffff'); ?>;}
	
	#navigation-narrow-dark nav, #navigation-narrow-dark .sf-menu li li,
	#navigation-wide-dark nav, #navigation-wide-dark .sf-menu li li
	{background-color:<?php echo of_get_option('dark_navigation', '#7a7a7a'); ?>;}
	
	<?php echo '</style>'; ?>

</head>
<body <?php body_class(); ?>>
	<header>
		
		<div id="header-top-container">
			<div id="header-top">
				
				<div id="header-top-left">
					<?php
						wp_nav_menu(array( 'theme_location' => 'my_top_nav', 'depth' => 2, 'fallback_cb' => false, 'menu_class' => 'sf-menu', 'container' => 'false', 'container_class' => ''  ));
					?>
							
				</div><!-- close #header-top-left -->

				
				<?php if(of_get_option('header_icons', 'yes') == 'yes'): ?>
				<div id="header-top-right">
					
					<div class="social-icons">
						<?php if(of_get_option('twitter_id')): ?>
						<a href="<?php echo of_get_option('twitter_id'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/twitter.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('facebook_link')): ?>
						<a href="<?php echo of_get_option('facebook_link'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/facebook.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('tumblr_link')): ?>
						<a href="<?php echo of_get_option('tumblr_link'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/tumblr.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('dribbble_link')): ?>
						<a href="<?php echo of_get_option('dribbble_link'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/dribbble.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('skype_id')): ?>
						<a href="<?php echo of_get_option('skype_id'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/skype.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('vimeo_channel')): ?>
						<a href="<?php echo of_get_option('vimeo_channel'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/vimeo.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('youtube_channel')): ?>
						<a href="<?php echo of_get_option('youtube_channel'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/youtube.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('email_address')): ?>
						<a href="mailto:<?php echo of_get_option('email_address'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/email.png" alt="" class="transparent" /></a>
						<?php endif; ?>
					</div>
				</div><!-- close #header-top-right -->
				
				<?php endif; ?>
				
				<div class="clearfix"></div>
			</div><!-- close #header-top -->
		</div><!-- close #header-top-container -->
		
		
		
		<div id="header-gradient">
			
			<div id="header-logo-container">
				<div id="logo"><a href="<?php echo site_url(); ?>"><img src="<?php echo of_get_option('logo', get_template_directory_uri() . "/images/logo.png"); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a></div>
				
				
				<?php
					if(of_get_option('display_searchbox', 'yes') == 'yes'):
				?>
				
					<div id="header-logo-right">
						<form method="get" class="searchform" action="<?php echo site_url(); ?>">
							<label for="s" class="assistive-text"><?php _e('Search','progressionstudios'); ?></label>
							<input type="text" class="field" name="s" id="s" placeholder="<?php _e('Search','progressionstudios'); ?>" />
							<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php _e('Search','progressionstudios'); ?>" />
						</form>
						
						
					</div><!-- close #header-logo-right -->
					
				<?php
					elseif(of_get_option('display_searchbox', 'yes') == 'ad'):
				?>
				
					<div id="header-logo-right">

						<div class="advertisement">
							<?php echo of_get_option('header_ad_code'); ?>
						</div>

					</div><!-- close #header-logo-right -->
					
				<?php
					endif;
				?>
			
			<div class="clearfix"></div>
			</div><!-- close #header-logo-container -->
			
			<div id="navigation-<?php echo of_get_option('navigation_style','narrow'); ?>">
				<nav>
					<?php
						wp_nav_menu(array( 'theme_location' => 'my_main_nav', 'depth' => 4, 'fallback_cb' => false, 'menu_class' => 'sf-menu', 'container' => 'false',  'container_class' => ''  ));
					?>
							
					<div class="clearfix"></div>
				</nav>
			</div><!-- close #navigation-narrow -->

		</div><!-- close #header-gradient -->
		
	</header>
	
	
	<div id="main" role="main">

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39628420
You can add them just before

</div><!-- close #header-top-left -->
0
 

Author Comment

by:jonathanduane2010
ID: 39628433
great, thanks ok i have done that

how can i get rid of the white part underneath now? and change the grey to white??
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 58

Expert Comment

by:Gary
ID: 39628455
In your stylesheet

line 215- remove
#header-top-container {
    background: url("images/header-top-background.png") repeat-x scroll left bottom #FFFFFF;
}


From the HTML remove
<div id="header-logo-container">
      <div id="logo"><a href="http://dancingsoul.greatlocks.ie"><img alt="The Dancing Soul" src=""></a></div>
0
 

Author Comment

by:jonathanduane2010
ID: 39628471
thank you!!

thats great!

Can i ask one last question?

Is there a way of bringing the slider up? so the white space is minimal?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39628488
And get rid of the Home bit?

I would just add the bolded line to your settings.css (line 17)

.rev_slider_wrapper {
    margin-top: -70px !important;
   position: relative;
}
0
 

Author Comment

by:jonathanduane2010
ID: 39628516
Hi,

I cant find settings.css ??
0
 
LVL 58

Accepted Solution

by:
Gary earned 445 total points
ID: 39628571
0
 

Author Comment

by:jonathanduane2010
ID: 39628579
great thank you
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn how to dynamically set the form action using jQuery.

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now