• Resolvido Matheus Cerini

    (@mcartell)


    Bom dia, estou usando o tema Lovecraft, fiz algumas alterações e acrescentei um background na sidebar que por natureza não tinha. Ficou da seguinte maneira http://i.imgur.com/P1N5JFZ.png

    Porém eu quero que tenha um espaço em branco entre a borda da sidebar e o início do conteúdo.

    Creio que a alteração seja feito nesse pedaço do style.css porém não consegui

    /* -------------------------------------------------------------------------------- */
    /*	12. Sidebar
    /* -------------------------------------------------------------------------------- */
    
    .sidebar {
    	width: 28%;
    	float: right;
    	background: #fff;
    }
    
    .widget + .widget {
    	padding-top: 30px;
    	border-top: 0px solid #ddd;
    	margin-top: 30px;
    }
    
    .widget-title {
    	display: inline-block;
    	padding-bottom: 3px;
    	border-bottom: 0px solid #db1032;
    	margin-bottom: 20px;
    	font-family: 'Lato', Helvetica, sans-serif;
    	font-size: 1.5em;
    	font-weight: 900;
    	text-transform: none;
    	letter-spacing: 1px;
    }
    
    /* Widget Content --------------------------------------- */
    
    .widget-content {
    	font-family: 'Lato', Helvetica, sans-serif;
    	font-size: 0.95em;
    }
    
    .widget-content .textwidget a:hover { text-decoration: underline;  }
    
    .widget-content p {
    	line-height: 150%;
    	margin-top: 1em;
    }
    
    .widget-content p:first-child { margin-top: 0; }
    
    .widget-content li {
    	line-height: 140%;
    	padding: 12px 0;
    	border-bottom: 0px solid #ddd;
    	max-width: 92%;
    }
    
    .widget-content ul ul { margin-left: 1em; }
    
    .widget-content ul ul li:first-child {
    	margin-top: 0.5em;
    	border-top: 1px solid #ddd;
    
    }
    
    .widget-content > ul > li:first-child { padding-top: 0; }
    
    .widget-content li:last-child {
    	padding-bottom: 0;
    	border-bottom: none;
    }
    
    /* Text Widget --------------------------------------- */
    
    .textwidget { line-height: 150%; }
    
    /* Widget Icons --------------------------------------- */
    
    .widget_archive li,
    .widget_categories li,
    .widget_meta li,
    .widget_nav_menu li,
    .widget_pages { color: #888; }
    
    .widget_archive li a,
    .widget_categories li a,
    .widget_meta li a,
    .widget_nav_menu li a,
    .widget_pages li a { color: #383636; }
    
    .widget_archive li a:hover,
    .widget_categories li a:hover,
    .widget_meta li a:hover,
    .widget_nav_menu li a:hover,
    .widget_pages li a:hover {
    	color: #db1032;
    	text-decoration: none;
    }
    
    .widget_archive li:before,
    .widget_categories li:before,
    .widget_meta li:before,
    .widget_nav_menu li:before {
    	font: 16px/1 'Genericons';
    	width: 16px;
    	height: 16px;
    	display: inline-block;
    	vertical-align: middle;
    	color: #999;
    	margin-right: 8px;
    	position: relative;
    	top: -1px;
    }
    
    .widget_archive li:before { content: '\f307'; }
    .widget_categories li:before { content: '\f301'; }
    .widget_meta li:before { content: '\f445'; }
    .widget_nav_menu li:before { content: '\f429'; }
Visualizando 3 respostas - 1 até 3 (de um total de 3)
  • Para este caso você usa o padding. Exemplo:

    .sidebar {
    width: 28%;
    float: right;
    background: #fff;
    padding: 0 20px 0 20px;
    }

    Observação: 0(topo) 20px(direita) 0(bottom) 20px(esquerda).

    Ou você pode simplesmente colocar assim:

    .sidebar {
    width: 28%;
    float: right;
    background: #fff;
    padding-left: 20px;
    padding-right:20px;
    }

    Criador do tópico Matheus Cerini

    (@mcartell)

    Consegui, muito obrigado.

    Ótimo! Por nada!

Visualizando 3 respostas - 1 até 3 (de um total de 3)
  • O tópico ‘Espaço entre a borda da sidebar’ está fechado para novas respostas.