Apply css style to a single Laravel layout element

Question

Apply css style to a single Laravel layout element

Navigation

#1 by (2 votes)

1

When I apply this style to the layout:

<!-- Nota: Aqui empieza codigo de menu -->
<STYLE TYPE="text/css">
  /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
  @import url(http://fonts.googleapis.com/css?family=Open+Sans);


nav {
max-width: 100%;
mask-image: linear-gradient(90deg, rgba(0, 255, 0, 0) 0%, #000000 10%, #000000 100%, rgba(0, 255, 0, 0) 90%);
margin: 0 auto;
padding: 0px 0;
}

nav ul {
text-align: center;
background: linear-gradient(90deg, rgba(0, 255, 0, 0) 0%, rgba(0, 255, 0, 0.2) 25%, rgba(0, 255, 0, 0.2) 75%, rgba(0, 0, 0, 0) 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(0, 0, 0, 0.6);
}

nav ul li {
display: inline-block;
}

nav ul li a {
padding: 24px;
font-family: "Open Sans";
text-transform:uppercase;
color: rgba(0, 0, 0, 0.5);
font-size: 24px;
text-decoration: none;
display: block;
}

nav ul li a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.7);
}
</STYLE>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<!-- Nota: Aqui termina codigo de menu -->

It applies not only to the start menu, but also to the user's part: This the code of the part of the user which I want to separate from the style that I attached previously (The one that can be seen in the upper part in the attached image)

<div id="app">
    <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">
                {{ config('app.name', 'Laravel') }}
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left Side Of Navbar -->
                <ul class="navbar-nav mr-auto">
                <li><a href="{{ route('blog') }}">Blog</a></li>    

                </ul>

                <!-- Right Side Of Navbar -->
                <ul class="navbar-nav ml-auto">
                    <!-- Authentication Links -->
                    @guest
                        <li><a class="nav-link" href="{{ route('login') }}">Login</a></li>
                        <li><a class="nav-link" href="{{ route('register') }}">Register</a></li>
                    @else
                    <li><a href="{{ route('tags.index') }}">Etiquetas</a></li>
                    <li><a href="{{ route('categories.index') }}">Categorias</a></li>
                    <li><a href="{{ route('posts.index') }}">Entradas</a></li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="{{ route('logout') }}"
                                   onclick="event.preventDefault();
                                                 document.getElementById('logout-form').submit();">
                                    Logout
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                    @csrf
                                </form>
                            </div>
                        </li>
                    @endguest
                </ul>
            </div>
        </div>
    </nav>

        @if(session('info'))     
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="alert alert-success">
                            {{ session('info') }}
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if(count($errors))
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="alert alert-danger">
                            <ul>
                                @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach    
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endif
</div>

The idea is that this style only applies to the start menu and not to the user's part.

EDIT1: I have been able to solve it based on what I have been told. This is the modified style code using classes:

<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

nav.inicio1 {
max-width: 100%;
mask-image: linear-gradient(90deg, rgba(0, 255, 0, 0) 0%, #000000 10%, #000000 100%, rgba(0, 255, 0, 0) 90%);
margin: 0 auto;
padding: 0px 0;
}

nav ul.inicio2 {
text-align: center;
background: linear-gradient(90deg, rgba(0, 255, 0, 0) 0%, rgba(0, 255, 0, 0.2) 25%, rgba(0, 255, 0, 0.2) 75%, rgba(0, 0, 0, 0) 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(0, 0, 0, 0.6);
}

nav ul li.inicio3 {
display: inline-block;
}

nav ul li a.inicio4 {
padding: 24px;
font-family: "Open Sans";
text-transform:uppercase;
color: rgba(0, 0, 0, 0.5);
font-size: 24px;
text-decoration: none;
display: block;
}

nav ul li a:hover.inicio5 {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.7);
}
</style>

And here the code of the start bar:

<nav class="inicio1 inicio2 inicio3 inicio4 inicio5">
<ul class="inicio2 inicio3 inicio4 inicio5">
<li class="inicio3 inicio4 inicio5">
  <a href="http://localhost:8000/" class="inicio4 inicio5">Inicio</a>
</li>
<li class="inicio3 inicio4 inicio5">
  <a href="{{ route('blog')}}" class="inicio4 inicio5">Actualidad</a>
</li>
<li class="inicio3 inicio4 inicio5">
  <a href="{{ route('instituto')}}" class="inicio4 inicio5">Instituto</a>
</li>
<li class="inicio3 inicio4 inicio5">
  <a href="#" class="inicio4 inicio5">Aulas</a>
</li>
<li class="inicio3 inicio4 inicio5">
  <a href="#" class="inicio4 inicio5">Departamentos</a>
</li>
</ul>
</nav>

I think it's not very nice, but at least it works.

html5 css3 css

asked by Kinafune 15.02.2018 в 19:30

source

1 answer

Problem with ConnectionString Error Object of class mysqli_result could not be converted to string when trying to display a value of a query in a php table

score 2 · Answer 1

Really, your problem is that you are applying the styles to the HTML tags but not to the specific elements for which you want to change a style.

To do what you want you will need to use classes or ID's. Classes are used when you want more than one element to have the same style and IDs when you want to refer to a single element.

Example changing text color by HTML tag :

span{
   color: red;
}

<span>Este es un texto rojo</span><br>
<span>Este es un texto rojo</span><br>
<span>Este es un texto rojo</span><br>
<span>Este es un texto rojo</span><br>

As you can see, the style is applied to all span tags.

Example changing the text color by classes and ID

.rojo{
   color: red;
}

#azul{
   color: blue;
}

<span class="rojo">Este es un texto rojo</span><br>
<span class="rojo">Este es un texto rojo</span><br>
<span>Este es un texto por defecto</span><br>
<span id="azul">Este es un texto rojo</span><br>

As you can see, in this case I have applied a class called rojo to several of the texts but without affecting the rest of the elements, only those that have that class.

Also, I used an ID called azul that I apply to a single element. Do not apply IDs equal to more than one element, otherwise use classes .

Please note that the text to which we have not indicated any class or ID is not affected.

NOTE: In your CSS the ID's will be represented by a # pad and the classes by a point .