zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü Text anpassen in CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.12.2020, 21:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2020
Beiträge: 3
peterchen1976 befindet sich auf einem aufstrebenden Ast
Standard Menü Text anpassen in CSS

Hallo, ich bin Neu hier und hoffe Ohr könnt mir helfen. Ich komme nicht auf die Lösung. Ich habe ein Menü in Wordpress:

home. philosophie.

Jetzt habe ich jedem Menüpunkt eine css klasse hinzugefügt.

Ich möchte das home in grau steht und der Punkt am Ende in rot.

Das selbe benötige ich auch für philosophie. ich bekomme alles hinden text groß mit ".philosophie { text-transform: capitalize; }"

Abe wie bekomme ich diesen Punkt am Ende in rot

Ich hoffe Ihr habt eine Idee. Ich möchte ungern noch ein Plugin dafür benutzen.

Vielen lieben Dank für diese tolle Forum was mir schon so viel Hilfe beschert hat.

Gruß Peter
Angehängte Grafiken
Dateityp: jpg Menue.JPG (9,9 KB, 4x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.12.2020, 11:45
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.953
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Dazu müsstest du den Punkt in ein span Element verpacken und entsprechend formatieren. Mit CSS kannst du nicht einzelne Zeichen ansprechen. Eine alternative wäre es, den Punkt mit CSS direkt zu erzeugen
Code:
.philosophie:after { content:".";color:red; }"
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.12.2020, 13:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2020
Beiträge: 3
peterchen1976 befindet sich auf einem aufstrebenden Ast
Standard

Hi vielen Dank für die Antwort das hilft mir schon etwas weiter aber jetzt ist der Punkt unterhalb des Wortes.

.philosophie:after {content:".";color:red }
Angehängte Grafiken
Dateityp: jpg Menue.JPG (10,1 KB, 2x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 03.12.2020, 14:27
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.953
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Da ich deinen CSS Code nicht kenne, ist dir auch nur schwer zu helfen. Ich zeige dir Code wie es funktioniert, wenn es bei dir nicht funktioniert muss es an deinem Code liegen.

Code:
<style type="text/css">
.philosophie {color:blue } 
.philosophie:after {content:".";color:red } 
</style>
<div class="philosophie">philosophie</div>
Anmerkung: Der Name für dir Klasse "philosophie" kommt mir merkwürdig vor. Bist du sicher, dass du an dieser Stelle eine Klasse brauchst?
Mit Zitat antworten
  #5 (permalink)  
Alt 07.12.2020, 14:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.12.2020
Beiträge: 3
peterchen1976 befindet sich auf einem aufstrebenden Ast
Standard Anpassung der PHP datei?

Irgendwie klappt es nicht wie ich mir das vorstelle meine Neuer Ansatz den Punkt am Ende der Menüeinträge zu verändern ist es einfach die class-walker-nav-menu.php anzupassen. Nur wie? Ich möchte gerne hinter jedem menüeintag einen lila punkt haben. Eventuell habt Ihr hier einen Ansatz für mich.

"

<?php
/**
* Nav Menu API: Walker_Nav_Menu class
*
* @package WordPress
* @subpackage Nav_Menus
* @since 4.6.0
*/

/**
* Core class used to implement an HTML list of nav menu items.
*
* @since 3.0.0
*
* @see Walker
*/
class Walker_Nav_Menu extends Walker {
/**
* What the class handles.
*
* @since 3.0.0
* @var string
*
* @see Walker::$tree_type
*/
public $tree_type = array( 'post_type', 'taxonomy', 'custom' );

/**
* Database fields to use.
*
* @since 3.0.0
* @todo Decouple this.
* @var array
*
* @see Walker::$db_fields
*/
public $db_fields = array(
'parent' => 'menu_item_parent',
'id' => 'db_id',
);

/**
* Starts the list before the elements are added.
*
* @since 3.0.0
*
* @see Walker::start_lvl()
*
* @param string $output Used to append additional content (passed by reference).
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function start_lvl( &$output, $depth = 0, $args = null ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );

// Default class.
$classes = array( 'sub-menu' );

/**
* Filters the CSS class(es) applied to a menu list element.
*
* @since 4.8.0
*
* @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
* @param stdClass $args An object of `wp_nav_menu()` arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = join( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

$output .= "{$n}{$indent}<ul$class_names>{$n}";
}

/**
* Ends the list of after the elements are added.
*
* @since 3.0.0
*
* @see Walker::end_lvl()
*
* @param string $output Used to append additional content (passed by reference).
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function end_lvl( &$output, $depth = 0, $args = null ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = str_repeat( $t, $depth );
$output .= "$indent</ul>{$n}";
}

/**
* Starts the element output.
*
* @since 3.0.0
* @since 4.4.0 The {@see 'nav_menu_item_args'} filter was added.
*
* @see Walker::start_el()
*
* @param string $output Used to append additional content (passed by reference).
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $id Current item ID.
*/
public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;

/**
* Filters the arguments for a single nav menu item.
*
* @since 4.4.0
*
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
*/
$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

/**
* Filters the CSS classes applied to a menu item's list item element.
*
* @since 3.0.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param string[] $classes Array of the CSS classes that are applied to the menu item's `<li>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

/**
* Filters the ID applied to a menu item's list item element.
*
* @since 3.0.1
* @since 4.1.0 The `$depth` parameter was added.
*
* @param string $menu_id The ID that is applied to the menu item's `<li>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

$output .= $indent . '<li' . $id . $class_names . '>';

$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
if ( '_blank' === $item->target && empty( $item->xfn ) ) {
$atts['rel'] = 'noopener noreferrer';
} else {
$atts['rel'] = $item->xfn;
}
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['aria-current'] = $item->current ? 'page' : '';

/**
* Filters the HTML attributes applied to a menu item's anchor element.
*
* @since 3.6.0
* @since 4.1.0 The `$depth` parameter was added.
*
* @param array $atts {
* The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
*
* @type string $title Title attribute.
* @type string $target Target attribute.
* @type string $rel The rel attribute.
* @type string $href The href attribute.
* @type string $aria_current The aria-current attribute.
* }
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( is_scalar( $value ) && '' !== $value && false !== $value ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}

/** This filter is documented in wp-includes/post-template.php */
$title = apply_filters( 'the_title', $item->title, $item->ID );

/**
* Filters a menu item's title.
*
* @since 4.4.0
*
* @param string $title The menu item's title.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @param int $depth Depth of menu item. Used for padding.
*/
$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

$item_output = $args->before;
$item_output .= '<a' . $attributes . '>';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

/**
* Filters a menu item's starting output.
*
* The menu item's starting output only includes `$args->before`, the opening `<a>`,
* the menu item's title, the closing `</a>`, and `$args->after`. Currently, there is
* no filter for modifying the opening and closing `<li>` for a menu item.
*
* @since 3.0.0
*
* @param string $item_output The menu item's starting HTML output.
* @param WP_Post $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

/**
* Ends the element output, if needed.
*
* @since 3.0.0
*
* @see Walker::end_el()
*
* @param string $output Used to append additional content (passed by reference).
* @param WP_Post $item Page data object. Not used.
* @param int $depth Depth of page. Not Used.
* @param stdClass $args An object of wp_nav_menu() arguments.
*/
public function end_el( &$output, $item, $depth = 0, $args = null ) {
if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
$t = '';
$n = '';
} else {
$t = "\t";
$n = "\n";
}
$output .= "</li>{$n}";
}

}
"

Danke Euch vielmals für die Hilfe
Mit Zitat antworten
  #6 (permalink)  
Alt 07.12.2020, 14:57
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.953
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Wir reden über HTML/CSS, da spielt der PHP Code keine Rolle. Du musst dein HTML mit CSS so ansprechen/auswählen, das das passiert was du möchtest. Wir kennen diesen code aber nicht, daher können wir dir so nicht weiterhelfen.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wrapper wächst nicht mit, keine Floats maclady CSS 11 10.02.2010 18:30
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
CSS Tips & Tricks Webnauts Ressourcen 0 26.08.2006 00:04
Probleme mit Abständen zwischen div´s.... darvida CSS 4 09.07.2005 19:48
Bild im Container mittig positionieren... 18inch CSS 5 09.07.2005 15:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:35 Uhr.