Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › “Change the x & y coordinates of the background image in CSS.”

  • This topic is empty.
Viewing 15 posts - 31 through 45 (of 64 total)
1 2 3 4 5
  • Author
    Posts
  • September 4, 2011 at 7:41 pm #86347
    Anonymous
    Inactive

    Header.php


    

    

    
>
    

    

    

    

    
<?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' | '; } ?><?php bloginfo('name'); if(is_home()) { echo ' | '; bloginfo('description'); } ?>
    

    

    

    

    

    

    

    

    

    

    

    

    


    
// Enqueue stylesheets
    
wp_enqueue_style('periodic-core-styles',get_bloginfo('stylesheet_url'),'',version_cache(),'screen');
    
if ( get_option('wap8_css') == 'Legacy Purple' ) {
    
wp_enqueue_style('legacy-purple',get_bloginfo('template_url') . '/css/purple.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Legacy Red' ) {
    
wp_enqueue_style('legacy-red',get_bloginfo('template_url') . '/css/red.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Legacy Orange' ) {
    
wp_enqueue_style('legacy-orange',get_bloginfo('template_url') . '/css/orange.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Legacy Pink' ) {
    
wp_enqueue_style('legacy-pink',get_bloginfo('template_url') . '/css/pink.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Legacy Blue' ) {
    
wp_enqueue_style('legacy-blue',get_bloginfo('template_url') . '/css/blue.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Legacy Green' ) {
    
wp_enqueue_style('legacy-green',get_bloginfo('template_url') . '/css/green.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Dark Spectrum Purple' ) {
    
wp_enqueue_style('spectrum-purple',get_bloginfo('template_url') . '/css/spectrum-purple.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Dark Spectrum Red' ) {
    
wp_enqueue_style('spectrum-red',get_bloginfo('template_url') . '/css/spectrum-red.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Dark Spectrum Orange' ) {
    
wp_enqueue_style('spectrum-orange',get_bloginfo('template_url') . '/css/spectrum-orange.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Dark Spectrum Pink' ) {
    
wp_enqueue_style('spectrum-pink',get_bloginfo('template_url') . '/css/spectrum-pink.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Dark Spectrum Blue' ) {
    
wp_enqueue_style('spectrum-blue',get_bloginfo('template_url') . '/css/spectrum-blue.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Dark Spectrum Green' ) {
    
wp_enqueue_style('spectrum-green',get_bloginfo('template_url') . '/css/spectrum-green.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Black and Purple' ) {
    
wp_enqueue_style('black-purple',get_bloginfo('template_url') . '/css/black-purple.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Black and Red' ) {
    
wp_enqueue_style('black-red',get_bloginfo('template_url') . '/css/black-red.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Black and Orange' ) {
    
wp_enqueue_style('black-orange',get_bloginfo('template_url') . '/css/black-orange.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Black and Pink' ) {
    
wp_enqueue_style('black-pink',get_bloginfo('template_url') . '/css/black-pink.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Black and Blue' ) {
    
wp_enqueue_style('black-blue',get_bloginfo('template_url') . '/css/black-blue.css','',version_cache(),'screen');
    
} elseif ( get_option('wap8_css') == 'Black and Green' ) {
    
wp_enqueue_style('black-green',get_bloginfo('template_url') . '/css/black-green.css','',version_cache(),'screen');
    
}
    
wp_enqueue_style('fancybox-styles',get_bloginfo('template_url') . '/fancybox/jquery.fancybox-1.3.4.css','',version_cache(),'screen');
    
if ( get_option('wap8_custom_css') == 'true') {
    
wp_enqueue_style('custom-styles',get_bloginfo('template_url') . '/custom.css','',version_cache(),'screen');
    
}
    
wp_enqueue_style('print-style',get_bloginfo('template_url') . '/css/print.css','',version_cache(),'print');
    

    
// Enqueue footer scripts
    
wp_enqueue_script('periodic-jquery',get_bloginfo('template_url').'/js/periodic.js',array('jquery'),version_cache(), true);
    
if ( is_single() ) { // only load on post pages
    
if ( get_option('wap8_show_twitter') == 'true' ) {
    
wp_enqueue_script('twitter-platform-script','http://platform.twitter.com/widgets.js',array('jquery'),version_cache(), true);
    
}
    
if ( get_option('wap8_show_gbuzz') == 'true' ) {
    
wp_enqueue_script('gbuzz-button-script','http://www.google.com/buzz/api/button.js',array('jquery'),version_cache(), true);
    
}
    
if ( get_option('wap8_show_digg') == 'true' ) {
    
wp_enqueue_script('digg-button-script',get_bloginfo('template_url').'/js/digg.js',array('jquery'),version_cache(), true);
    
}
    
}
    

    
wp_head(); // delete this and your world will come to an end
    

    
?>
    

    

    
>
    


    


    


    

if ( function_exists( 'wp_nav_menu' ) ) {
    
wp_nav_menu(
    
array(
    
'theme_location' => 'utility-menu',
    
'fallback_cb' => 'periodic_page_menu',
    
'menu_class' => 'header-menu'
    
)
    

    
);
    
}
    
else {
    
periodic_page_menu();
    
}
    
?>
    September 4, 2011 at 8:02 pm #86343
    Anonymous
    Inactive

    The last 350 characters or so of the Header.php (it was too big to post in one post)
    September 4, 2011 at 8:05 pm #86344
    Anonymous
    Inactive

    Hi @ChristopherBurton – Ok, got both the Header.php and homeblog.php posted. Whew. So simple, but I wasn’t including the “/” in the closing tags which was causing the trouble.

    September 4, 2011 at 8:09 pm #86348
    chrisburton
    Participant

    @jonbyington – This is it

    Specifically

    " title="">

    In your CSS, look for this and remove the background code.

    .logo-text a, .logo-text a:visited {
    September 4, 2011 at 8:44 pm #86349
    Anonymous
    Inactive

    @ChristopherBurton Sweet! The black rectangle is gone. Thank you so much for showing me how to remove it. I’ll be around tonight if you still have time to help with the linking w/out a border for the header. Thanks, again.

    September 4, 2011 at 8:48 pm #86350
    chrisburton
    Participant

    @jonbyington – Try this:
    September 4, 2011 at 8:58 pm #86351
    Anonymous
    Inactive

    @ChristopherBurton – Ok, I replaced it. I don’t notice anything.

    September 4, 2011 at 9:24 pm #86352
    chrisburton
    Participant

    @jonbyington – I wanted to see where exactly it shows up, you can change it back.

    September 4, 2011 at 9:57 pm #86359
    Anonymous
    Inactive

    @ChristopherBurton ok, changed it back.

    September 4, 2011 at 10:10 pm #86365
    chrisburton
    Participant

    jonbyington – Alright, lets do something I love about HTML5.

    Change your doctype to this:

    Then, lets wrap an anchor tag on #angles:

    ...
    September 4, 2011 at 10:34 pm #86371
    Anonymous
    Inactive

    @ChristopherBurton
    Oops! Not sure what I did, but the header disappeared and there is a bit of code on the top left of the screen. This is the anchor tag code I used for #angles in the CSS Document and I also updated the doctype in the Header.php.


    
/***** Structure *****/
    
body { background: #e0e0e0 url(../images/backgrounds/bg-darkheader.gif) repeat-x 0 0; }
    
#angles 
    ...
     { background: url(../images/backgrounds/bg-spectrum.jpg) no-repeat 50% 25px;}
    September 4, 2011 at 10:36 pm #86372
    chrisburton
    Participant

    @jonbyington – Remove


    
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    It should just be

    Also, why are you adding HTML to your CSS? Remove that as well.

    September 4, 2011 at 10:41 pm #86375
    Anonymous
    Inactive

    @ChristopherBurton – Ok, done and the code at the top of the page is gone, but still no header.

    September 4, 2011 at 10:47 pm #86377
    chrisburton
    Participant

    Do you have any knowledge of HTML and/or CSS? I feel like I could do this myself in just under a few minutes and spend more time explaining what I did.

    Paste your style.css file using the pre code tags.

    September 4, 2011 at 11:31 pm #86380
    Anonymous
    Inactive

    HI @ChristopherBurton Yep, I’m sure you could. As you’ve noticed, I don’t have a lot of HTML/CSS experience. I’ve made tweaks to the site here and there on my own or with help from various sites, but I’m not a pro. I changed the CSS file back to normal and made the angles change to the Header.php. Below is the style.ccc file. Thanks for being patient. Sending in two parts because it’s too long.


    
/*
    
Theme Name: Periodic
    
Theme URI: http://www.wearepixel8.com/
    
Description: Periodic is a premium WordPress magazine theme that is highly customizable with 18 different color schemes to choose from. Tailor Periodic to your needs with 6 widgetized areas (home sidebar, left sidebar, right sidebar and three in the footer), 2 custom menus (2 in the header), 12 custom widgets, 3 page templates, streaming video integration and a host of theme options to personalise your environment. To modify your copy of Periodic, click on the Periodic Theme Options link, in the WordPress Admin sidebar.
    
Version: 2.2
    
Author: We Are Pixel8
    
Author URI: http://www.wearepixel8.com/
    
*/
    

    
/*
    
As of version 2.0, we recommend not making any edits to this file. If you wish to customize Periodic, please use the blank custom.css file to add your own style declarations and check the option in the Theme Options panel. You should retain a local copy of your custom.css file for backup.
    
*/
    

    
/***** Resets *****/
    
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td { margin: 0; padding: 0; border: 0; outline: none; }
    
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
    
:focus { outline: 0; }
    
body { line-height: 1; color: #000; background: #fff; }
    
img { border: 0; }
    
ol, ul { list-style: none; }
    
table { border-collapse: separate; border-spacing: 0; }
    
caption, th, td { text-align: left; font-weight: normal; }
    
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
    
blockquote, q { quotes: "" ""; }
    
a { outline: none; }
    

    
/***** @font-face Fonts *****/
    
@font-face { font-family: 'VollkornRegular'; src: url('fonts/Vollkorn-Regular-webfont.eot'); src: local('VollkornRegular'), url('fonts/Vollkorn-Regular-webfont.woff') format('woff'), url('fonts/Vollkorn-Regular-webfont.ttf') format('truetype'), url('fonts/Vollkorn-Regular-webfont.svg#webfont2c9a8Pup') format('svg'); font-weight: normal; font-style: normal; }
    
@font-face { font-family: 'VollkornBold'; src: url('fonts/Vollkorn-Bold-webfont.eot'); src: local('VollkornBold'), url('fonts/Vollkorn-Bold-webfont.woff') format('woff'), url('fonts/Vollkorn-Bold-webfont.ttf') format('truetype'), url('fonts/Vollkorn-Bold-webfont.svg#webfontnFUVHqaM') format('svg'); font-weight: normal; font-style: normal; }
    
@font-face { font-family: 'VollkornItalic'; src: url('fonts/Vollkorn-Italic-webfont.eot'); src: local('VollkornItalic'), url('fonts/Vollkorn-Italic-webfont.woff') format('woff'), url('fonts/Vollkorn-Italic-webfont.ttf') format('truetype'), url('fonts/Vollkorn-Italic-webfont.svg#webfontNWDnMVvY') format('svg'); font-weight: normal; font-style: normal; }
    
@font-face { font-family: 'VollkornBoldItalic'; src: url('fonts/Vollkorn-BoldItalic-webfont.eot'); src: local('VollkornBoldItalic'), url('fonts/Vollkorn-BoldItalic-webfont.woff') format('woff'), url('fonts/Vollkorn-BoldItalic-webfont.ttf') format('truetype'), url('fonts/Vollkorn-BoldItalic-webfont.svg#webfontOcvOCEpg') format('svg'); font-weight: normal; font-style: normal; }
    

    
/***** Structure and Layout *****/
    
body { font: 62.5% Arial, "Helvetica Neue", Helvetica, sans-serif; color: #666; }
    
#angles { position: relative; width: 100%; }
    
.inner-wrapper { position: relative; width: 960px; margin: 0 auto; }
    
#column-container { position: relative; width: 960px; background: #fff url(images/backgrounds/bg-sidebar.gif) repeat-y top right; padding: 20px 0 0; }
    
#column-container-left { position: relative; width: 960px; background: #fff url(images/backgrounds/bg-sidebar.gif) repeat-y top left; padding: 20px 0; }
    
#column-container-wide { position: relative; width: 960px; background: #fff; padding: 20px 0; }
    
#left-column, #right-column { position: relative; width: 640px; }
    
#right-sidebar, #left-sidebar { position: relative; width: 320px; }
    
#right-sidebar, #right-column { float: right; }
    
#left-column, #left-sidebar { float: left; }
    
.video-sidebar { position: relative; width: 300px; margin: 0 10px 20px; padding: 0 0 20px; border-bottom: 1px solid #d9d9d9; }
    

    
/***** Float Classes and Clear Float Fix *****/
    
.clear { display: inline-block; }
    
.clear:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }
    
/* Hide from IE Mac */ .clear { display: block; } /* End hide from IE Mac */
    
.alignleft { float: left; }
    
.alignright { float: right; }
    

    
/***** Utility Banner *****/
    
#utility-banner { position: relative; width: 100%; background: #222 url(images/backgrounds/bg-gray.jpg); z-index: 198; }
    

    
/***** Utility Banner Navigation *****/
    
#utility-banner ul { position: relative; }
    
#utility-banner li { float: left; position: relative; line-height: 30px; }
    
#utility-banner li:hover { visibility: inherit; }
    
#utility-banner li a, #utility-banner li a:visited { font-size: 1.1em; font-weight: bold; text-decoration: none; display: block; text-transform: uppercase; margin: 0 20px 0 0; position: relative; }
    

    
/***** Utility Banner Dropdown Menu *****/
    
#utility-banner ul ul { position: absolute; top: -999em; width: 20em; background: #e6e6e6; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; margin: 0; }
    
#utility-banner ul ul li { clear: left; width: 100%; border-top: 1px solid #d9d9d9; line-height: 3em; }
    
#utility-banner ul ul li:first-child { border: none; }
    
#utility-banner ul ul li a, #utility-banner ul ul li a:visited { text-transform: capitalize !important; color: #323232;  padding: 0 10px; margin: 0;  }
    
#utility-banner ul ul li a:hover, #utility-banner ul ul li a:active { color: #fff !important; }
    

    
/***** Show Utility Banner Dropdown Menu *****/
    
#utility-banner ul li:hover ul, #utility-banner ul li.sfHover ul { top: 3em; left: -0.2em; z-index: 199; }
    

    
/***** Hide Utility Banner Flyout Navigation Level 1 - 3 *****/
    
#utility-banner ul ul li:hover ul, #utility-banner ul ul li.sfHover ul,
    
#utility-banner ul ul ul li:hover ul, #utility-banner ul ul ul li.sfHover ul,
    
#utility-banner ul ul ul ul li:hover ul, #utility-banner ul ul ul ul li.sfHover ul { top: -999em; }
    

    
/***** Show Utility Banner Flyout Navigation Level 1 - 3 *****/
    
#utility-banner ul ul li:hover ul, #utility-banner ul ul li.sfHover ul,
    
#utility-banner ul ul ul li:hover ul, #utility-banner ul ul ul li.sfHover ul,
    
#utility-banner ul ul ul ul li:hover ul, #utility-banner ul ul ul ul li.sfHover ul { top: 0; left: 20em; }
    

    
/***** Socialize Menu *****/
    
.socialize { float: right; }
    
.socialize li a { margin: 0 0 0 20px !important; }
    
.socialize .get-feed { background: url(images/backgrounds/bg-rss.png) no-repeat 0 9px; padding: 0 0 0 15px; }
    

    
/***** 728x90 Leaderboard Banner Ad *****/
    
#banner-728 { position: relative; display: block; width: 738px; height: 100px; margin: 20px auto; }
    
#banner-728 a img, #banner-728 a img:visited { display: block; border: 5px solid #fff; -webkit-transition: border .2s linear; transition: border .2s linear; }
    
#banner-728 a img:hover, #banner-728 a img:active { -webkit-transition: border .1.5s linear; transition: border .1.5s linear;  }
  • Author
    Posts
Viewing 15 posts - 31 through 45 (of 64 total)
1 2 3 4 5
  • The forum ‘CSS’ is closed to new topics and replies.