Jump to content
php.lv forumi

Vajadzīga CSS palīdzība iekš WordPress


osC

Recommended Posts

Sveiki, man radušās pāris problēmiņas ar Wordpress. Respektīvi, vēlos nedaudz rediģēt linku lapu veidni (template). 

Tad nu tā, lieta tāda, ka uzejot ar peli uz bildes (kā parādīts attēlā) uzlec teksts ar ikonām un fonu. 

Lietas ko vēlētos parediģēt:

  1. Izlabot CSS tā, lai teksts rādītos pa visu attēlu (nevis tikai daļu, kur beigās ir [...] )
  2. Izņemt peles kursora hover teksta lodziņu (kas tāpat rādās nesakarīgi) 
  3. noņemt bezjēdzīgo lapas ritinātāju labajā pusē 

Parādīju arī nedaudz visu grafiski, lai ir kautkāda saprašana. 

Tad vēl paskatījos, un atradu PHP un CSS lapas template.

 

28hkklh.jpg

Tad vēl uzgāju pāris kodus.

<?php
/**
 * Template Name: Portfolio Fullsize Scroller
 *
 * @package WordPress
 * @subpackage Invictus
 * @since Invictus 1.0
 */

global $meta;

$meta                   = max_get_cutom_meta_array();
$meta_scroller_height   = get_post_meta($post->ID, MAX_SHORTNAME.'_max_scroller_height', TRUE);
$scroller_height        = !empty($meta_scroller_height) ? $meta_scroller_height : 0;

get_header();

// show the item caption of an image on hover?
$itemCaption = true;

// Hide the excerpt on hover?
$hideExcerpt = false;

?>

		<div id="primary" class="clearfix portfolio-fullsize-scroller<?php if ( post_password_required() ) : ?> portfolio-fullsize-closed<?php endif; ?>">
			<div id="content" role="main" class="clearfix">

				<header class="entry-header">

				<h1 class="page-title"><?php the_title(); ?></h1>
				<?php
				// check if there is a excerpt
				if( max_get_the_excerpt() ){
				?>
				<h2 class="page-description"><?php max_get_the_excerpt(false) ?></h2>
				<?php } ?>

				</header><!-- .entry-header -->

				<?php /* -- added 2.0 -- */ ?>
				<?php the_content() ?>
				<?php /* -- end -- */ ?>

				<?php if ( !post_password_required() ) { ?>
				<div id="customScroller" class="scroll-pane">

					<div class="scroll-content">
					<?php
						// including the loop template gallery-loop.php
						get_template_part( 'includes/gallery', 'loop.inc' );
					?>
					</div>
					<a href="#scroll-left" id="scroll_left" class="scroller-arrow disabled">Scroll Left</a>
					<a href="#scroll-right" id="scroll_right" class="scroller-arrow">Scroll Right</a>

					<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
						<div class="scroll-bar"></div>
					</div>

					<div class="overlay"></div>

				</div>
				<?php } ?>

			</div><!-- #content -->
		</div><!-- #container -->

<?php get_footer(); ?>

un tad vēl css'ā atradu pāris rindas ar šo te:

	/** Scrollable Fullsize Portfolio **/
	.portfolio-fullsize-scroller .portfolio-list { margin: 0; }
	.portfolio-fullsize-scroller .portfolio-list li { margin: 0 10px 22px 0; display: block; }
	.portfolio-fullsize-scroller .portfolio-list li:last-child { margin-right: 0; }

	.portfolio-fullsize-scroller .scroll-content { width: 100000px; } /* set it to extra large to not break images in two or more lines on load */

	.portfolio-fullsize-scroller .scroll-pane {
		overflow: hidden;
		width: 100%;
		float: left;
		position: relative;
		padding: 0 0 13px;
	}
	.portfolio-fullsize-scroller .scroll-content { float: left; }

	.portfolio-fullsize-scroller .scroll-pane .overlay {
    position: absolute;
    top: 0;
    left:  0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
	}

	.portfolio-fullsize-scroller .scroll-bar-wrap {
		position: absolute;
		margin: 0;
		bottom: 0;0
		height: 50px;
		right: 0;
		left: 0;
	}

	.portfolio-fullsize-scroller .scroll-bar {
		margin: 0;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 12px;
	}

	.portfolio-fullsize-scroller .scroll-bar a.ui-slider-handle {

		display: block;
		position: absolute;
		top: 1px;
		width: 64px; height: 10px;
		color: rgba(0,0,0,.5);
		text-shadow: 0 1px 0 rgba(255,255,255,.3);
		text-align: center;
		line-height: 1;
		padding: 0;
		font-size: 10px;
		text-decoration: none;
		letter-spacing: 2px;
		font-weight: bold;

		background-image: -webkit-linear-gradient(top, rgba(242, 242, 242, 0.25), rgba(209, 209, 209, 0));
		background-image: -moz-linear-gradient(top, rgba(242, 242, 242, 0.25), rgba(209, 209, 209, 0));
		background-image: -o-linear-gradient(top, rgba(242, 242, 242, 0.25), rgba(209, 209, 209, 0));
		background-image: -ms-linear-gradient(top, rgba(242, 242, 242, 0.25), rgba(209, 209, 209, 0));
		background-image: linear-gradient(top, rgba(242, 242, 242, 0.25), rgba(209, 209, 209, 0));


	}

	.portfolio-fullsize-scroller a.scroller-arrow {
		position: absolute;
		display: block;
		text-indent: -999em;
		z-index: 20;
		top: 50%;
		margin-top: -32px;
		width: 52px;
		height: 64px;

		display: none;
	}

	.portfolio-fullsize-scroller a#scroll_left { left: 0; background-position: 0 50%; }
	.portfolio-fullsize-scroller a#scroll_right { right: 0; background-position: 100% 50%; }

	.portfolio-fullsize-scroller a.disabled { display: none; }

Tad nu tā, vēlējos uzzināt, kur ir aprakstīts tieši par to, kur uzlecošais logs uz hover atbilst tā teksta garumam? 

Kāds varbūt var palīdzēt? Būtu ļoti pateicīgs. Parādā nepalikšu! :) 

Link to comment
Share on other sites

  • Replies 41
  • Created
  • Last Reply

Top Posters In This Topic

Tas hovera teksts izskatās pēc Excerpt

 

Atver functions.php un pameklē šādu kodu

 

add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

 

function custom_excerpt_length( $length ) {
    return 20; // Šitas ir excerpt garums
}
 

Link to comment
Share on other sites

Tas hovera teksts izskatās pēc Excerpt

 

Atver functions.php un pameklē šādu kodu

 

add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

 

function custom_excerpt_length( $length ) {

    return 20; // Šitas ir excerpt garums

}

 

hmm, atradu tikai šādu...

/*-----------------------------------------------------------------------------------*/
/*  Add Excerpt Support to pages
/*-----------------------------------------------------------------------------------*/
add_post_type_support('page', array('excerpt'));
add_filter('excerpt_length', create_function('$a', 'return 50;'));

šis būs? 

Link to comment
Share on other sites

Jā, šitas būs īstais

 

add_filter('excerpt_length', create_function('$a', 'return 50;'));

 

Nomaini 50 pret lielāku skaitli

ok, tas itkā būtu. vēl, kā var noņemt to stulbo scroll bar labajā pusē? itkā defaultā viņš nenāk līdzi, bet nu, jēgas viņam arī nekādas nav, jo pārvieto tikai kādus pāris pikseļus uz augšu un leju.

tad vēl, kā varētu noņemt to stulbo hover tekstu, kad ar peli uziet uz bildes? tas galīgi traucē. ķeburi lieki un jēgas arī nekādas.

Link to comment
Share on other sites

Es galīgi netieku galā ar mouse hover. Par mouse hover atbild noteikti PHP, nevis CSS, vaine? Un tas kas atbild par mouse hover atradīsies šajā pašā lapas template vai pašā wordpress

 

Tas hovera teksts izskatās pēc Excerpt

 

Atver functions.php un pameklē šādu kodu

 

add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

 

function custom_excerpt_length( $length ) {
    return 20; // Šitas ir excerpt garums
}
 

Link to comment
Share on other sites

Uz hoveru izpeldošais teksts ir title atribūts a tagam. Kur tas tiek uzstādīts nevaru pateikt neredzot pašus templeit failus. Katrai tēmai tas var būt citur

 

Scrollbars ir tāpēc, ka kādam no tagiem CSSā ir uzstādīts overflow:auto vai arī overflow: scroll. Neredzot lapu nevaru pateikt, kurā vietā tas tiek uzstādīts

Google Chromam uzspied ar labo peles taustiņu, paņem Inspect element. Klikšķini pa html tagiem un skaties, kuram ir uzlikts overflow:auto. Tur pat auto nomaini uz hidden, ja scrollbars pazūd, tad esi atradi īsto vietu. Tālāk skaties, kurā cssā tas ir un nolabot css failu

Link to comment
Share on other sites

> Uz hoveru izpeldošais teksts ir title atribūts a tagam.

 

Nav teikts, ka “a“ tagam. Tik pat labi “b“.

 

Also, es tak viņam iedevu linkus. Kas būs nākamais — kāds uzkodēs viņa vietā?

Link to comment
Share on other sites

Ok, ar to overflow itkā būtu skaidrs, bet vēl jo projām nav saprašanas ar hoveru. Čakarē prātu vēl jo projām. Meklējos es iekš visiem template failiem ar notepad++, bet rezultāta pašalik vēl nekāda. Kāds nevar paskatīties? Links šeit , ja nu kas, tad parādā toč nepalikšu. #free_beer_at_paypal :)

 

> Uz hoveru izpeldošais teksts ir title atribūts a tagam.

Nav teikts, ka “a“ tagam. Tik pat labi “b“.

Also, es tak viņam iedevu linkus. Kas būs nākamais — kāds uzkodēs viņa vietā?

 

 

Uz hoveru izpeldošais teksts ir title atribūts a tagam. Kur tas tiek uzstādīts nevaru pateikt neredzot pašus templeit failus. Katrai tēmai tas var būt citur

 

Scrollbars ir tāpēc, ka kādam no tagiem CSSā ir uzstādīts overflow:auto vai arī overflow: scroll. Neredzot lapu nevaru pateikt, kurā vietā tas tiek uzstādīts

Google Chromam uzspied ar labo peles taustiņu, paņem Inspect element. Klikšķini pa html tagiem un skaties, kuram ir uzlikts overflow:auto. Tur pat auto nomaini uz hidden, ja scrollbars pazūd, tad esi atradi īsto vietu. Tālāk skaties, kurā cssā tas ir un nolabot css failu

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...