Вопрос о стилизации вкладок Navbar в css (Wordpress) - PullRequest
Новая
       13

Вопрос о стилизации вкладок Navbar в css (Wordpress)

0 голосов
/ 18 января 2011

Я пытаюсь стилизовать вкладки navbar. У меня есть две части кода, которые работают, но мне нужно больше контролировать отдельные вкладки и не знаю, как это сделать.

Эти вкладки находятся под заголовком и справа. И я пытаюсь закруглить нижний левый угол только первой вкладки. Два фрагмента кода под обоими вокруг нижней левой части каждой вкладки в навигационной панели.

Я хотел бы выяснить правильный код, который дал бы мне контроль над каждой вкладкой и позволил бы мне стилизовать каждую вкладку индивидуально. 2 фрагмента ниже приводят меня на полпути, но я не уверен, что лучше улучшить или что добавить. 

.custom .menu, .custom .menu a, .custom .menu li ul {
-moz-border-radius-bottomleft:.5em; font-weight:bold;
-webkit-border-bottom-left-radius:.5em; font-weight:bold;
-moz-border-radius-bottomright:.0em;
-webkit-border-bottom-right-radius:.0em;}

Или это: 

/* Remove the border from the far left. */
ul.menu{border-left:0;}

/* Add the left border back in. If you change the color of the nav border in the WordPress admin panel, you will also have to manually change the left border color below. */
ul.menu li.tab-1 a{
    border-left:1px solid #CCC;
    -moz-border-radius-topleft:.5em;
    -webkit-border-top-left-radius:.5em;}

/* This creates the rounded borders. */
ul.menu li.tab a{
    -moz-border-radius-bottomleft:.5em; font-weight:bold;
    -webkit-border-bottom-left-radius:.5em; font-weight:bold;
    -moz-border-radius-topright:.0em;
    -webkit-border-top-right-radius:.0em;}

Спасибо за любую помощь

Ответы [ 2 ]

0 голосов
/ 18 января 2011

Возможно, вы слишком перегружены - вы рассматривали возможность использования псевдокласса CSS :first-child ?В противном случае, как насчет округления нижнего левого угла <ul>, а не первого <li>?Исходя из того, что вы объяснили, оба из них позволят достичь желаемых результатов без написания строки PHP.

0 голосов
/ 18 января 2011

Что бы я сделал, так как у меня обычно есть какой-то php-скрипт, генерирующий html, - это когда html генерируется, чтобы придать каждой вкладке свой стиль.1004 *

Затем вы можете просто создать стиль CSS 

.tabclassname {
    // Special CSS goes here
}

В качестве альтернативы, если вы не генерируете вкладки программно.Вы можете просто ввести имя для каждого класса вручную.

РЕДАКТИРОВАТЬ: я в основном предложил PHP, потому что вы упомянули о желании контролировать все ваши вкладки.Если вам нужна только первая вкладка, то ul: first-child - хороший метод, или добавление эффекта округления к ul, как было предложено Гэвином

...