Running specific css for specific part of a page without overriding css of other part of page in laravel?

Question

Let's elaborate my problem. Think we have 3 template files 1.Master 2.Child(home) 3.navbar layout(included in home)

Mater->home->navbar

i have 2 external css files which have this css

p
{
color:red;
}

and

p
{
color:blue;
}

1st css file is linked in master.blade.php and 2nd css file is linked into navbar.blade.php

I want text color of navbar as blue and text color of home(other than navbar) as red.

Now the output is blue(overriding css which is declared in master).

I don't want to modify css(specificity), Is there anything in laravel like scopes for css.

Hamed · Accepted Answer · 2018-05-06 08:41:45Z

3

Are you familiar with blade into laravel?

I think you should define a yield section in your master

@yield('css')

and then call it in your navbar or etc ... like this

 @section('css')
     p
     {
      color:red;
     }
    @endsection

and in other files

 @section('css')
 p
 {
  color:blue;
 }
@endsection

answered May 6, 2018 at 8:41

Hamed

5013 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arnab Ghosh Over a year ago

i mentioned clearly that i don't want any css specificity.What you are doing is really simple and it is css specificity.And i don't require this.

emotality · Accepted Answer · 2018-05-06 08:41:50Z

1

Why don't you check the current route, then echo the color in style attribute in-line in your blade file:

@if(request()->is('/'))
    <!-- Homepage -->
    <p style="color:red">Hello</p>
@else
    <!-- All Other Pages -->
    <p style="color:blue">Hello</p>
@endif

or

<p style="color:{{ request()->is('/') ? 'red' : 'blue' }}">Hello</p>

answered May 6, 2018 at 8:41

emotality

13.1k4 gold badges43 silver badges60 bronze badges

1 Comment

Arnab Ghosh Over a year ago

sorry i can't do this as my url is same.As i am rendering into home layout only.

Josh · Accepted Answer · 2018-05-06 10:26:47Z

1

Why don't you just assign an ID to the different paragraph blocks and target them that way? Or even better, create a utility class for each colour.

.text-red {
   color: red;
}

And then...

<p class="text-red">Lorem ipsum[...]</p>

answered May 6, 2018 at 10:26

Josh

819 bronze badges

3 Comments

Josh Over a year ago

It really sounds like you're overcomplicating things - generally speaking, loading components as iframes is not a great idea and I'm not sure why you'd want to do so anyway.

Arnab Ghosh Over a year ago

actually i don't want specificity which u have mentioned like class,id, element.I want something like scopes in laravel which we have in AngularJS.But i don't think what i require is possible in laravel blade.

Josh Over a year ago

I just don't really see the point. It seems much easier to make use of utility classes or selectors to ensure that your elements are being styled correctly.

Collectives™ on Stack Overflow

Running specific css for specific part of a page without overriding css of other part of page in laravel?

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related