Como colocar logos ao invés de palavras no menu. Uso o Carmack:

  • Unknown's avatar
    leopoldoscremin · Member ·

    Senhores,

    Estou tendo dificuldades em colocar imagens o rodapé de meu portal. Gostaria de inserir logos para cada equipe. Alguém consegue me ajudar?
    footballnews.com.br

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Google translation:

    Gentlemen,

    I’m having difficulty putting images in the footer of my portal. I would like to insert logos for each team. Can someone help me?

    Hi there, first off, remove everything that you now have at Customize > CSS as some of it is code that is not allowed, and some of it has syntax errors that is causing issues. Then paste in the following there. 

    #footer .jetpack-social-navigation .menu-item-153 a::before {
  background: url('https://footballnewscombr.files.wordpress.com/2017/06/ari.png') no-repeat scroll center center / contain;
  color: transparent;
}
#footer .jetpack-social-navigation a::before {
  font-size: 5em;
}

    I’ve done the first team, the Arizona Cardinals. That section is actually meant for social media, so I don’t think it is going to work very well for your teams since the icons are going to be pretty small, and some of the icons are probably going to be very hard to read.

    If you would be more comfortable in your own language, we do have a Português support forum.

    Português (Portuguese): http://pt.forums.wordpress.com

  • Unknown's avatar
    leopoldoscremin · Member ·

    Olá, é exatamente isso. Como consigo os códigos dos outros times? Você consegue me enviar as configurações? Desde já agradeço.

  • Unknown's avatar
    leopoldoscremin · Member ·

    *outros times

  • Unknown's avatar
    leopoldoscremin · Member ·

    *TIMES

  • Unknown's avatar
    thesacredpath · Member ·

    Google translate:

    Hello, that’s exactly it. How do I get the codes of other teams? Can you send me the settings? Thank you very much in advance.

    Hi, using what I have already given you, you can use that as a guide and pull the menu id’s for each from the HTML for your site using the web inspector built into your browser. Here is a screenshot of what you will see for the social menu: https://cldup.com/qNn3OlmBtN.png

    1. Identify the menu item for each team.
    2. Go to your media library and get the URL of the image for that team.
    3. Copy and paste the following code into your custom CSS. Change the menu id number and then replace the URL in the background declaration with the new image url for that team. 

    #footer .jetpack-social-navigation .menu-item-153 a::before {
  background: url('https://footballnewscombr.files.wordpress.com/2017/06/ari.png') no-repeat scroll center center / contain;
  color: transparent;
}

    4. Repeat for each team.

  • Unknown's avatar
    leopoldoscremin · Member ·

    Deu certo. Só não entendi como puxar o ID do menu para cada um do HTML para o seu site, usando o inspetor da web incorporado no seu navegador.
    Será que é ´possível você me enviar o da lista de cabeçalho e sobreposição?

    Pois quando estou em outra página do site aparece acima um cabeçalho para colocar as logos das equipes e não consigo achar os códigos.

    Ex:
    #footer .jetpack-social-navigation .menu-item-153 a::before {
    background: url(‘https://footballnewscombr.files.wordpress.com/2017/06/ari.png’) no-repeat scroll center center / contain;
    color: transparent;
    }

    Acredito que o “footer” e os itens do menu devam mudar. Consegue me passar estes códigos.

    E obrigado pela ajuda que vem me dando.

  • Unknown's avatar
    thesacredpath · Member ·

    Google translation:

    It worked. I just did not understand how to pull the menu ID for each of the HTML to your site by using the embedded web inspector in your browser.
    Is it ‘possible’ for you to send me the header and overlay list?

    For when I am on another page of the site, a header appears to place the logos of the teams and I can not find the codes.

    Ex: 

    #footer .jetpack-social-navigation .menu-item-153 a :: before {
Background: url ('https://footballnewscombr.files.wordpress.com/2017/06/ari.png') no-repeat scroll center center / contain;
Color: transparent;
}

    I believe that the footer and menu items should change. Can you give me these codes.

    And thanks for the help you’ve been giving me.

    I just looked at your site and it appears that you have gotten all the icons in place. Nice job!

    If you wish to highlight the team icon in the footer menu area when someone is on that page, add the following to your custom CSS and you can adjust the background color. I also added a border to it. 

    #footer .jetpack-social-navigation .current_page_item, #footer .jetpack-social-navigation .current-menu-item {
	border: 1px solid #000;
	background-color: #ccc;
}

    On the top main navigation, when you are on a particular page, the text is underlined. Did you want to change that to some other type of styling?

  • Unknown's avatar
    thesacredpath · Member ·

    You could do something like this for the top main navigation current page item. 

    .menu-wrapper li.current_page_item, .menu-wrapper li.current-menu-item {
	background-color: #b83928;
}
  • Unknown's avatar
    leopoldoscremin · Member ·

    Ficou muito legal, obrigado. Será que eu consigo colocar os mesmos emblemas das equipes na parte de cima? Abaixo do cabeçalho que conta com as páginas já existentes.
    Ex: https://cloudup.com/cZ2XmKo-4Os

  • Unknown's avatar
    leopoldoscremin · Member ·

    Sobre a pergunta que eu havia feito anteriormente, eu me refiro a estes espaços para a logo que aparecem nesta imagem ( https://cloudup.com/cOWyGigQk4O ). Eles aparecem quando se está em alguma página e o mouse é direcionado para cima.

    Consegue me ensinar como configurar o CSS para esta parte?

  • Unknown's avatar
    thesacredpath · Member ·

    Google translate:

    About the question I had previously asked, I refer to these spaces for the logo that appear in this image (https://cloudup.com/cOWyGigQk4O). They appear when you are on some page and the mouse is directed upwards.

    Can you teach me how to configure CSS for this part?

    Is that the menu that appears when you click the icon to the left of Football News at top left? If so, that is the secondary nav and this is what I’m seeing for that: https://cldup.com/hNpScsmiLY.png

    The process is similar, but there are some differences in the way we will do things. Use this for the Arizona Cardinals as an example and copy/paste it for the other teams and change the menu item number and the URL of the image as needed. 

    .nav-secondary .menu-item-153 a {
	background: url('https://footballnewscombr.files.wordpress.com/2017/06/cardinals.png') no-repeat scroll left top / contain;
	color: transparent;
	height: 96px;
}
  • Unknown's avatar
    leopoldoscremin · Member ·

    Boa noite, agradeço a tentativa e a ajuda do senhor, mas desta vez infelizmente não deu certo. Mesmo colocando todos os códigos da mesma maneira que fizemos com o #footer, desta vez o ícone continuou sem as logos das equipes (conforme imagem https://cloudup.com/c4MqtDK51Ey ).

    Caso consiga outros códigos ficarei muito agradecido, porém agradeço muito a ajuda que o senhor me deu.

  • Unknown's avatar
    thesacredpath · Member ·

    Google translation:

    Good evening, thank you for your attempt and help, but this time unfortunately it did not work. Even putting all the codes the same way we did with #footer, this time the icon continued without the team logos (as picture https://cloudup.com/c4MqtDK51Ey).

    If I get other codes I will be very grateful, but I thank you very much for the help you gave me.

    Sorry, I missed that and didn’t realize I had to scroll down in order to see it. Add this to your custom CSS. 

    .single-nav-wrapper .jetpack-social-navigation a:before {
	height: 70px;
	width: 70px;
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-153 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/cardinals.png') no-repeat scroll center center / contain;
	color:transparent;
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-154 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/falcons.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-170 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/balt.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-196 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/buff.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-213 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/car.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-226 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/chic.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-241 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/cinci.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-255 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/clev.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-267 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/dallas.gif') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-279 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/broncos.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-305 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/det.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-321 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/green.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-334 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/hous.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-347 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/indi.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-361 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/jack.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-388 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/kannsas.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-401 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/chargers-la.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-414 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/los-ang-r.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-426 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/mia.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-438 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/minn.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-451 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/new-en.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-463 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/new-or.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-476 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/new-york-g.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-492 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/new-y-j.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-518 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/oak.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-532 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/phila.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-547 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/pitt.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-557 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/san.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-568 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/seat.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-583 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/tam.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-594 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/tenn.png') no-repeat scroll center center / contain;
	color:transparent
}
.single-nav-wrapper .jetpack-social-navigation .menu-item-606 a::before {
	background:url('https://footballnewscombr.files.wordpress.com/2017/06/wash.png') no-repeat scroll center center / contain;
	color:transparent
}
  • The topic ‘Como colocar logos ao invés de palavras no menu. Uso o Carmack:’ is closed to new replies.