Q&A

제 웹페이지 URL : http://kimbapp.com

사용 XE버젼 :  XE최신 버젼 1.8.15

사용 레이아웃 : 기본 레이아웃

사용 호스팅 : cafe24

 

Q. 최신글 게시판 위젯에다가 jpg 파일을 넣고 싶어 html 코딩을 보려면 어떻게 해야 하나요? 아니면 html 코딩으로 <img src=" url address">하는 방법 말고 다른 방법이 있을까요?

 

아래 사진을 보시면 아시겠지만 제 웹페이지의 모바일 버젼은 Free Board와 같이 게시판 제목만 써져있습니다. 여기에 아래 사진처럼 게시판 제목 옆에 이미지 파일을 넣고 싶습니다.

 

< 제 웹페이지의 모바일 버젼 - 텍스트밖에 없음>

내 홈피 모바일 사진.jpg

<제가 따라하고 싶은 사진 - 게시판 제목 옆에 사진 넣기>

자유게시판에 사진.png

제 생각에는 게시판 제목 옆에 사진을 넣으려면 html 코딩을 만져서 <img src=" ">를 넣어야 한다고 생각했는데요. xe에서 관리자 페이지를 아무리 들어가보아도 위젯의 html코딩을 보여주는 화면은 없더라고요. 참고로 저는 메인페이지를 위젯페이지로 만들고, 그 위젯페이지에서 [페이지 수정] - [Content 위젯 추가]의 방식으로 제 웹페이지의 최근 글 위젯을 만들었습니다.

( 제가 참고한 글 : http://www.xeschool.com/xe/step1_19 "최근 게시글 꾸미기")

 

혹시 1) 어떻게 위젯의 html 코딩을 볼 수 있는지,

       2) 아니라면 html 코딩을 보지 않더라도 위젯에 쓰여져 있는 텍스트 옆에 이미지를 추가할 방법이 있는지

알려주신다면 정말로 감사하겠습니다.

 

 

댓글 7

  • ftp에서 widgets / contents / skins / 사용하시는 위젯 스킨 /
    이런 식으로 들어가셔서 수정하시면 될거에요.

    또 다른 방법으로는 아이콘을 사용하실 수도 있겠네요
    http://xpressengine.github.io/XEIcon/started.html
    이쪽 참고해보세요
  • 보니까 위젯 스타일을 사용하시는 것 같은데

    위젯스타일은 경로가 widgetstyles / 사용하시는 위젯스타일

    이런 식입니다.
  • @파파즈

    답변해주셔서 감사합니다. 그런데 2가지 질문만 더 여쭈어 봐도 될까요?

    Q1. 알 ftp에서 위젯스타일 폴더에 보니 simple 한가지 폴더밖에 없더라구요. 그런데 이 폴더 안에 들어있는 4가지 파일 중에서 어느 file을 어느 프로그램으로 편집하면 될까요?

    ftp page.PNG

     

    Q2.  html 코드로 <img src=" "> 를 추가하려고 widgetstyle.html 파일을 "Microsoft Word"로 편집하려 하니 아래 사진과 같이 뜨더라구요. 그런데 제 게시판 제목인 "Free Board"나 "Love & Relationshp"들은 하나도 보이지 않더라구요. 어디에 img src를 넣으면 되는 걸까요?

    캡처3.PNG

     

  • 제목별로 서로 다른 이미지를 넣으려고 하시는건가요?
  • @파파즈

    네 맞아요. 제목별로 서로 다른 이미지를 넣으려고 생각하고 있습니다! widgetstyle.html 이라고 제가 잘 찍었네요!!

  • @홈페이지만들꺼야

    그러시면 아이콘을 사용하시는 편이 간단할 것 같네요.

    레이아웃 <head></head> 안에

    <link rel="stylesheet" href="//cdn.jsdelivr.net/xeicon/1.0.4/xeicon.min.css">

    위 코드를 넣으시고

    위젯스타일 제목 입력하는 곳에 가셔서

    http://xpressengine.github.io/XEIcon/started.html

    이곳의 안내에 따라 <i class="xi-xpressengine"></i> 이런 식으로 입력하시면 됩니다.

    예)) <i class='xi-xpressengine'></i> 자유 게시판

  • <h2>{$widgetstyle_extra_var->ws_title}</h2>

    여기가 위젯의 제목이 들어가는 부분입니다.

    word 말고 notepad++ 같은 무료 소프트웨어 다운받아서 편집하시면 좋을거에요..