nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change Div Title

Vakhtang_Zubiashvili

Hi all,

I want to change Attachment's title (see Pic.) I know how to override CSS defaults, but what to do with DIV elements i do not know.

Any help please

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

The code I posted was tested and working. Not sure why you added the first css rule you posted above.

All comments

Vakhtang_Zubiashvili

Aaah, i used 4.14 version, switch to 4.15 it works. Thanks my friend

RobertScheitlin__GISP

The code I posted was tested and working. Not sure why you added the first css rule you posted above.

Vakhtang_Zubiashvili

Robert,

I tried but it did not work.

But if i do it like i show in this code, it changes ATTACHMENTS color, but title stays same.

div<SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>feature__attachments<SPAN class="operator token">-</SPAN>title  <SPAN class="punctuation token">{</SPAN>
  content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Blah Blah"</SPAN><SPAN class="punctuation token">;</SPAN>
  color<SPAN class="punctuation token">:</SPAN>#dc2d5e<SPAN class="punctuation token">;</SPAN>
  text<SPAN class="operator token">-</SPAN>indent<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
  display<SPAN class="punctuation token">:</SPAN> block<SPAN class="punctuation token">;</SPAN>
  line<SPAN class="operator token">-</SPAN>height<SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

  
<SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>feature__attachments <SPAN class="operator token">></SPAN> h2 <SPAN class="punctuation token">{</SPAN>
  text<SPAN class="operator token">-</SPAN>indent<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN>9999px<SPAN class="punctuation token">;</SPAN>
  line<SPAN class="operator token">-</SPAN>height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>feature__attachments <SPAN class="operator token">></SPAN> h2<SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">:</SPAN>after <SPAN class="punctuation token">{</SPAN>
  content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Blah Blah"</SPAN><SPAN class="punctuation token">;</SPAN>
  text<SPAN class="operator token">-</SPAN>indent<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
  display<SPAN class="punctuation token">:</SPAN> block<SPAN class="punctuation token">;</SPAN>
  line<SPAN class="operator token">-</SPAN>height<SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

RobertScheitlin__GISP

Vakhtang,

This is a real hack but it allows you to replace the text inside a css rule:

<SPAN class="selector token">.esri-feature__attachments > h2</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">text-indent</SPAN><SPAN class="punctuation token">:</SPAN> -9999px<SPAN class="punctuation token">;</SPAN>
  <SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.esri-feature__attachments > h2::after</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Blah Blah"</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="property token">text-indent</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
  <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> block<SPAN class="punctuation token">;</SPAN>
  <SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN> initial<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.